タブにサービスを注入する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); 
    } 
}` 

接続-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

をproviders:[...]を忘れてしまっている、それはまた、メニューやタブまたは多数の異なるページで動作すると思います。 sidemenuまたはtabsはページを表示する単なる方法です。

メニューやタブテンプレート自体からサービスにアクセスすることを心配する場合は、それらが@Appクラスの関連するテンプレートであることに注意してください。サービスからアクセスするには、@Pageの場合と同じようにの@Appにサービスを追加する必要があります（これは現在行っていません）。

Answer 2

私はあなたが正しいアーキテクチャを持っているあなたのマップコンポーネントに