javascript - 将服务注入(inject)选项卡 ionic 2

Question

我正在学习本教程 advanced google maps component in ionic 2 .
我一步一步完成的，效果很好，但只在单页上。 在我的项目中，我计划使用选项卡或侧边菜单设计。
我已经在本教程的博客上询问过，但仍然没有任何回应。
在此先感谢任何帮助或建议。
我在控制台中尝试了以下操作，没有错误。
map .js:

import {Page, NavController} from 'ionic-angular';
import {ConnectivityService} from '../../providers/connectivity-service/connectivity-service';
@Page({
  templateUrl: 'build/pages/map/map.html',
  providers: [ConnectivityService],
})
export class MapPage {
  static get parameters() {
    return [[NavController],[ConnectivityService]];
  }
  constructor(nav, connectivityService) {
    this.nav = nav;
    this.connectivity = connectivityService;
    this.map = null;
    this.mapInitialised = false;
    this.apiKey = null;
    this.loadGoogleMaps();
  }
  loadGoogleMaps(){
    var me = this;
    this.addConnectivityListeners();
    if(typeof google == "undefined" || typeof google.maps == "undefined"){
        console.log("Google maps JavaScript needs to be loaded.");
        this.disableMap();
        if(this.connectivity.isOnline()){
            console.log("online, loading map");
            window.mapInit = function(){
                me.initMap();
                me.enableMap();
            }
            let script = document.createElement("script");
            script.id = "googleMaps";
            if(this.apiKey){
                script.src = 'http://maps.google.com/maps/api/js?key=' + apiKey + '&callback=mapInit';
            } else {
                script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';               
            }
            document.body.appendChild(script);  
        }   
    }
    else {
        if(this.connectivity.isOnline()){
            console.log("showing map");
            this.initMap();
            this.enableMap();
        }
        else {
            console.log("disabling map");
            this.disableMap();
        }
    }
  }
  initMap(){
    this.mapInitialised = true;
    navigator.geolocation.getCurrentPosition( (position) => {
        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        let mapOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }, (error) => {
        console.log(error);
    });
  }
  disableMap(){
    console.log("disable map");
  }
  enableMap(){
    console.log("enable map");
  }
  addConnectivityListeners(){
    var me = this;
    var onOnline = function(){
        setTimeout(function(){
            if(typeof google == "undefined" || typeof google.maps == "undefined"){
                me.loadGoogleMaps();
            } else {
                if(!me.mapInitialised){
                    me.initMap();
                }
                me.enableMap();
            }
        }, 2000);
    };
    var onOffline = function(){
        me.disableMap();
    };
    document.addEventListener('online', onOnline, false);
    document.addEventListener('offline', onOffline, false);
  }
}`

connectivity-service.js:

import {Injectable} from 'angular2/core';
import {Platform} from 'ionic-angular';

@Injectable()
export class ConnectivityService {
  static get parameters(){
    return [[Platform]]
  }  

  constructor(platform) {
    this.platform = platform;
    this.onDevice = this.platform.is('ios') || this.platform.is('android');
  }

  isOnline() {
    if(this.onDevice && navigator.connection){
      let networkState = navigator.connection.type;
      return networkState !== Connection.NONE;
    } else {
      return navigator.onLine;      
    }
  }

  isOffline(){
    if(this.onDevice && navigator.connection){
      let networkState = navigator.connection.type;
      return networkState === Connection.NONE;
    } else {
      return !navigator.onLine;     
    }
  }
}

应用程序.js

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

tabs.html:

<ion-tabs>
  <ion-tab [root]="mapPage" tabIcon="map"></ion-tab>
  <ion-tab [root]="listPage" tabIcon="list-box"></ion-tab>
</ion-tabs>

tabs.js

import {Page} from 'ionic-angular';
import {MapPage} from '../map/map';
import {ListadoPage} from '../listado/listado';

@Page({
  templateUrl: 'build/pages/tabs/tabs.html',
})
export class TabsPage {
  constructor() {
    this.mapPage = MapPage;
    this.listPage = ListadoPage;
  }
}

Answer 1

你有正确的架构，它也适用于菜单或选项卡或许多不同的页面；侧边菜单或标签只是一种显示页面的方式。

如果您担心从菜单或选项卡模板本身访问服务，请记住它们只是 @App 类的关联模板。因此，要从他们那里访问服务，您需要将服务添加到 @App 的 constructor 中，就像您为 @Page 所做的那样(您现在没有这样做)。