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:[...]

Answer 2

你有正确的架构，它也可以使用菜单或标签或许多不同的页面; sidemenu或tabs只是显示页面的一种方式。

如果您担心从菜单或标签模板本身访问该服务，请记住它们只是@App类的关联模板。因此，要从他们访问服务，您需要将服务添加到constructor的{{1}}，就像您对@App所做的那样（您现在没有这样做）。< / p>

将服务注入离子2

2 个答案: