Question

我正在尝试访问提供程序内部的NavParams，但是我知道导入NavParams不能解决问题。

有关我的应用程序的简短信息，用户输入了他们的姓名和地址，地图上会基于该地址显示一个图钉，并且当用户单击该图钉时，会显示一个警告，告知该图钉的名称。

这是我按下名称的create-event.ts。

toMap() {
  this.navCtrl.push('MapPage', {eName: this.eventDetail.eventName});
}

在Map.ts上检索并推送到markers.ts

public eName: string;

constructor (...) {
this.eName = this.navParams.get('eName');
}

addMarker() {
let prompt = this.alertCtrl.create({
  title: 'Add Marker',
  message: "Enter Adress",
  inputs: [
    {
      name: 'Address',
      placeholder: 'Enter Address'
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Save',
      handler: data => {

        this.geoCodeandAdd(data.address);
        this.retrieveAddress(data.address);
      }
    }
  ]
});
prompt.present();
}
geoCodeandAdd(address) {
this.nativeGeocoder.forwardGeocode(address)
  .then((coordinates: NativeGeocoderForwardResult[]) => {

  this.markersProvider.saveMarker(coordinates[0]);
  this.navCtrl.push('MarkerProvider', {eName: this.eName});
})
.catch((error: any) => console.log(error));
}
  loadMarkers() {
this.markersProvider.getAllMarkers().subscribe((markers: any) => {
  markers.forEach(singlemarker => {
    let markerGroup = leaflet.featureGroup();

    let marker: any = leaflet
      .marker([singlemarker.latitude, singlemarker.longitude])
      .on("click", () => {
        alert(singlemarker.message);
      });
    markerGroup.addLayer(marker);
    this.map.addLayer(markerGroup);
  });
});
}

我的标记提供程序.ts

import { NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { AngularFirestore } from "angularfire2/firestore";

@Injectable()
export class MarkersProvider {
  public eName: string;
  constructor(private afs: AngularFirestore, public navCtrl: NavController, public navParams: NavParams) {
    console.log("Hello MarkersProvider Provider");
    this.eName = this.navParams.get('eName');
  }

  saveMarker(coords) {
    this.afs
      .collection("markers")
      .add({
        latitude: coords.latitude,
        longitude: coords.longitude,
        message: this.eName,
      })
      .then(() => {
        alert("Added");
      });
  }

  getAllMarkers() {
    return this.afs.collection("markers").valueChanges();
  }
}

堆栈跟踪

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Content -> NavController]: 
  StaticInjectorError(Platform: core)[Content -> NavController]: 
    NullInjectorError: No provider for NavController!
Error: StaticInjectorError(AppModule)[Content -> NavController]: 
  StaticInjectorError(Platform: core)[Content -> NavController]: 
    NullInjectorError: No provider for NavController!
    at _NullInjector.get (http://localhost:8100/build/vendor.js:1377:19)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:24)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:16)
    at StaticInjector.get (http://localhost:8100/build/vendor.js:1485:20)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:24)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:16)
    at StaticInjector.get (http://localhost:8100/build/vendor.js:1485:20)
    at resolveNgModuleDep (http://localhost:8100/build/vendor.js:11270:25)
    at _createClass (http://localhost:8100/build/vendor.js:11311:68)
    at _createProviderInstance$1     (http://localhost:8100/build/vendor.js:11281:26)
at c (http://localhost:8100/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:52760:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:52753:14)
at http://localhost:8100/build/vendor.js:52800:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242

是否可以在提供程序内部使用navparams。

Answer 1

您不需要navParams即可将值传递给提供程序。您只需将其作为函数的简单参数传递给提供程序中的相关方法即可。

在您的Map.ts中：

public eName: string;

constructor (...) {
this.eName = this.navParams.get('eName');
}

addMarker() {
let prompt = this.alertCtrl.create({
  title: 'Add Marker',
  message: "Enter Adress",
  inputs: [
    {
      name: 'Address',
      placeholder: 'Enter Address'
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Save',
      handler: data => {

        this.geoCodeandAdd(data.address);
        this.retrieveAddress(data.address);
      }
    }
  ]
});
prompt.present();
}
geoCodeandAdd(address) {
this.nativeGeocoder.forwardGeocode(address)
  .then((coordinates: NativeGeocoderForwardResult[]) => {

  // here pass eName as argument:
  this.markersProvider.saveMarker(coordinates[0], this.eName); 
  // removed this: this.navCtrl.push('MarkerProvider', {eName: this.eName});
})
.catch((error: any) => console.log(error));
}
  loadMarkers() {
this.markersProvider.getAllMarkers().subscribe((markers: any) => {
  markers.forEach(singlemarker => {
    let markerGroup = leaflet.featureGroup();

    let marker: any = leaflet
      .marker([singlemarker.latitude, singlemarker.longitude])
      .on("click", () => {
        alert(singlemarker.message);
      });
    markerGroup.addLayer(marker);
    this.map.addLayer(markerGroup);
  });
});
}

现在在您的提供程序中，修改使用eName的方法：

// remove this: import { NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { AngularFirestore } from "angularfire2/firestore";

@Injectable()
export class MarkersProvider {
  // remove this: public eName: string;
  // modify injections as you don't need nav things in your provider:
  constructor(private afs: AngularFirestore) {
    console.log("Hello MarkersProvider Provider");
    // remove this: this.eName = this.navParams.get('eName');
  }

  // here in this method add argument:
  saveMarker(coords, eName) {
    this.afs
      .collection("markers")
      .add({
        latitude: coords.latitude,
        longitude: coords.longitude,
        message: eName,
      })
      .then(() => {
        alert("Added");
      });
  }

  getAllMarkers() {
    return this.afs.collection("markers").valueChanges();
  }
}

访问提供商内部的NavParams，

1 个答案: