注入服務標籤離子2

Question

我正在關注本教程advanced google maps component in ionic 2。
我一步一步地完成，並且完美地工作，但只在單頁中。 在我的項目上，我打算使用標籤或sidemenu設計。
我已經在本教程的博客上提問，但仍然沒有迴應。
在此先感謝任何幫助或建議將被認爲。
我在控制檯中嘗試了以下沒有錯誤。
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); 
    } 
}` 

連接-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或標籤只是一種顯示頁面的方式。

如果您擔心從菜單或標籤模板本身訪問服務，請記住它們只是@App類的關聯模板。因此，要從他們那裏訪問服務，您需要將服務添加到@App的constructor，就像您對@Page（您目前沒有這樣做）那樣。

Answer 2

我想你已經在你的地圖組件忘記providers:[...]