将服务注入标签离子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;     
    }
  }
}

app.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

您拥有正确的架构，它也适用于菜单或选项卡或许多不同的页面； sidemenu 或 tabs 只是显示页面的一种方式。

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

Answer 2

我认为您在地图组件中忘记了providers:[...]