將服務注入到離子2中

Question

我在離子2中遵循本教程高級谷歌地圖組件 。
我一步一步地完成它並且完美地工作但僅在單頁中。 在我的項目中，我打算使用標簽或側面設計。
我已經在本教程的博客上詢問過但仍然沒有回復。
在此先感謝任何幫助或建議將是apreciated。
我在控制台中沒有錯誤地嘗試了以下操作。
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:[...]你的地圖組件

Answer 2

你有正確的架構，它也可以使用菜單或標簽或許多不同的頁面; sidemenu或tabs只是顯示頁面的一種方式。

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