0
注入提供商在多個頁面我有一個proivder命名爲MapProvider無法在離子3
import { Injectable} from '@angular/core';
import { Http } from '@angular/http';
//import 'rxjs/add/operator/map';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker, CameraPosition, PolylineOptions, ILatLng, Polyline } from "@ionic-native/google-maps";
import { Platform, AlertController } from "ionic-angular";
import { Storage } from '@ionic/storage';
import { MarkerProvider } from "../map/marker";
import { UserLocationProvider } from "../user/user-location";
import { Geoposition } from "@ionic-native/geolocation";
import { UserDataProvider } from "../user/user-data";
import { PolylineProvider } from "../map/polyline";
/*
Generated class for the MapProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
declare var google;
@Injectable()
export class MapProvider {
currentLocationMarker: Marker;
currentOrders;
constructor(private googleMaps: GoogleMaps,
public http: Http,
private markerProvider: MarkerProvider,
private userLocationProvider: UserLocationProvider,
private userData: UserDataProvider,
private polylineProvider: PolylineProvider,
private storage: Storage,
private alertCtrl: AlertController) {}
convert(data){
return data.map(order=>({
id : order.id,
pick : new LatLng(order.pick_lat,order.pick_lng),
pick_time : order.pick_ex_time,
drop : new LatLng(order.drop_lat,order.drop_lng),
drop_time : order.drop_ex_time
}))
}
loadMap(navCtrl){
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.getCurrentLocation(map,navCtrl)
.then((userLocationMarker: Marker)=>{
this.currentLocationMarker=userLocationMarker;
console.log(userLocationMarker);
// Watch User's Current Location
// Don't forget to unsubscibe this to avoid memory leak
let userWatchLocation=this.userLocationProvider.watchCurrentLocation();
let watchhOptions = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
};
userWatchLocation.subscribe((position: Geoposition)=>{
let userCurrentLatLng: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);
// Show Marker
this.markerProvider.addMarker(map,userCurrentLatLng,'Your Current Location','user')
.then((marker: Marker)=>{
this.currentLocationMarker.remove();
this.currentLocationMarker=marker;
//this.changeDetectorRef.detectChanges();
});
// console.log("Befor addAllMarker");
// console.log(this.currentOrders);
},error=>console.warn('ERROR(' + error.code + '): ' + error.message),
()=>watchhOptions);
});
});
}
getCurrentLocation(map,navCtrl){
return new Promise(resolve=>{
// Get user's current location and set map's position
let userCurrentLocation=this.userLocationProvider.getCurrentLocation();
userCurrentLocation.then((position: Geoposition)=>{
let userCurrentLatLng: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);
// Show Marker
this.markerProvider.addMarker(map,userCurrentLatLng,'Your Current Location','user')
.then((marker: Marker)=>{
this.currentLocationMarker=marker;
resolve(this.currentLocationMarker);
// Fetch user session data
this.storage.get('session').then((val) => {
// After fetching user's location show all orders points
let orderArray;
this.userData.getCurrentOrders(val.id).then(data=>{
orderArray=this.convert(data['deliveryOrders']);
// Alert user with number of delivery orders assigned to them
this.showAlert(orderArray.length,map);
//alert("You have "+orderArray.length+" Delivery Orders");
this.currentOrders=orderArray;
data['deliveryOrders'].map(order=>{
// Draw route between pick up and drop points of an order
this.polylineProvider.drawRoute(map,order.pick_lat,order.pick_lng,order.drop_lat,order.drop_lng,this.polylineProvider);
});
// Show current location marker and order location
this.markerProvider.addAllMarkers(map,this.currentOrders,navCtrl);
});
});
});
// create CameraPosition
let mapPosition: CameraPosition = {
target: userCurrentLatLng,
zoom: 25,
tilt: 30
};
// move the map's camera to position
map.moveCamera(mapPosition);
});
});
}
public showAlert(number,map): void {
// Disable the map
map.setClickable(false);
let alert = this.alertCtrl.create({
title: 'You have '+number +' Delivery Orders',
subTitle: '',
buttons: [
{
text: 'Dismiss',
role: 'cancel',
handler:() => {
// Enable the map again
map.setClickable(true);
}
}
]
});
// Show the alert
alert.present();
}
}我在HomePage作爲注入該供應商遵循
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMap, GoogleMapsEvent, LatLng, GoogleMaps, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
import { MapProvider } from "../../providers/map/map";
import { SignaturePage } from "../signature/signature";
//declare var google;
//declare var service;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
//map: GoogleMap;
constructor(private mapProvider: MapProvider,public navCtrl: NavController,
public platform: Platform, private alertCtrl: AlertController) {
platform.ready().then(() => {
//const mapElement=document.getElementById('map');
//this.mapProvider.loadMap(this.navCtrl);
});
}
ngOnInit(){
this.mapProvider.loadMap(this.navCtrl);
}
openPad(){
this.navCtrl.push(SignaturePage);
}
}但是當我在「OrderDropDetailsPage`注入此提供如下，我得到一個錯誤
import { Component, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { OrderDataProvider } from "../../providers/order/order-data";
import { ItemListPage } from "../item-list/item-list";
import { MapProvider } from "../../providers/map/map";
/**
* Generated class for the OrderDropDetailsPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-order-drop-details',
templateUrl: 'order-drop-details.html',
})
export class OrderDropDetailsPage {
order_id;
order_personal_data: any={};
constructor(private mapProvider: MapProvider,public navCtrl: NavController,
public navParams: NavParams,
private orderDataProvider: OrderDataProvider,
private changeDetectorRef: ChangeDetectorRef,
private alertCtrl: AlertController) {
this.order_id=navParams.get("order_id");
// Get details of customer and display
this.orderDataProvider.getDropPersonalDetails(this.order_id)
.then(data=>{
console.log(data);
this.order_personal_data=data;
// To display new changes call detectChanges()
this.changeDetectorRef.detectChanges();
console.log(this.order_personal_data);
});
}
// Show ordered items list in another page
showItems(){
this.navCtrl.push(ItemListPage,{order_id : this.order_id});
}
// Item is dropped - update order status and save time
dropped(){
// Confirm user action to change status
let alert = this.alertCtrl.create({
title: 'Confirm Your Action',
message: 'Your about to change the status of this order to DROPPED. Do you wish to proceed?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler:() => {
console.log('Cancel clicked');
}
},
{
text: 'Update Status',
handler:() => {
this.orderDataProvider.updateOrderStatus(this.order_id,"DROPPED")
.then(data=>{
// Update delivery status to DROPPED in detail page
this.order_personal_data.delivery_status='DROPPED';
// To display new changes call detectChanges()
this.changeDetectorRef.detectChanges();
console.log('Dropped');
});
}
}
]
});
alert.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad OrderDropDetailsPage');
}
}錯誤是遵循
Uncaught Error: Can't resolve all parameters for OrderDropDetailsPage: (?, [object Object], [object Object], [object Object], [object Object], [object Object]).
at syntaxError (http://localhost:8100/build/vendor.js:98171:34)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/vendor.js:111508:35)
at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/vendor.js:111376:26)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:8100/build/vendor.js:110985:24)
at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:8100/build/vendor.js:111629:45)
at http://localhost:8100/build/vendor.js:111201:55
at Array.map (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:111201:18)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:122261:66)
at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:122220:52)
我不知道爲什麼我無法在多個頁面中注入此提供程序。請幫助
該模塊並設置MapProvider作爲供應商？ –
該解決方案適合您嗎？ –