Typescript 访问提供程序中的NavParams，

我试图在提供程序中访问NavParams，但我知道导入NavParams无法解决问题

关于我的应用程序的简短信息，用户输入他们的姓名和地址，在地址的地图上会有一个pin，当用户单击pin时，会出现一个提示，显示pin的名称

这是我的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);
  });
});
}

我的标记提供者

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。

您不需要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();
  }
}

---

您应该设置此值，而不是尝试从提供程序获取标记名值。每当您的标记名发生更改时，只需呼叫您的提供商并设置值：this.MarkersProvider.ename=“name”Map.ts是根组件？您是否尝试使用localStorage？您好，我需要一个详细的细节，我这个月刚开始使用ionic，Map.ts是一个页面模块，我不知道更多的实现和如何使用localstorage，因为这是一个教程，但我对它进行了调整以满足我的需求need@saperlipopette，等等，对吗

getName（name）{this.eName=name}

在provider上，以及

this.markerProvider.getName（this.eName）

在mappage谢谢这比我想象中的要好得多没有问题；）navParams用于页面（组件），因为在将此类页面推入nav堆栈之前，它们不存在于内存中。提供程序确实存在于内存中，它们通常不会被销毁，因此您可以调用方法并将参数作为参数传递。