无法访问ngOnInit函数的参数窗体构造函数

Question

I'm passing params in Ionic 3 to a component. I understand that you pull the params in the constructor of the recieving page, but I'm having trouble accessing them in the pages ngOnInit.

So my constructor looks like this:

  constructor(public navCtrl: NavController, public navParams: NavParams, private contactsProvider: ContactsProvider) {
    let contactId = this.navParams.get('contactId');
    let ownerId = this.navParams.get('ownerId');

    // this.contactsProvider.getContact(ownerId, contactId)
    //   .subscribe(response =>{
    //    this.contact = response.json();
    //    console.log('Response: ', this.contact);
    //   })

  }

and my Init looks like this:

 ngOnInit(){
    this.contactsProvider.getContact(ownerId, contactId)
    .subscribe(response =>{
     this.contact = response.json();
     console.log('Response: ', this.contact);
    })
  }

I get a TS error saying that 'ownerId' does not exist on the page.

What am I doing wrong here.

Thanks for any input!!

Answer 1

It needs to be

this.contactId = this.navParams.get('contactId');
this.ownerId = this.navParams.get('ownerId');

otherwise the value will only be available inside the constructor.

And also here

ngOnInit(){
    this.contactsProvider.getContact(this.ownerId, this.contactId)

Answer 2

Variables declared in your constructor are local variables , only availables from the constructor() . You have to declare them as Component properties to be able to use them everywhere in your component, this way :

@Component({...})
private contactId: number;
private ownerId: number;
...

And then you can use them in your component methods, using this as Günter show you :

constructor(public navCtrl: NavController, public navParams: NavParams, private contactsProvider: ContactsProvider) {
  this.contactId = this.navParams.get('contactId');
  this.ownerId = this.navParams.get('ownerId');

}


ngOnInit(){
    this.contactsProvider.getContact(this.ownerId, this.contactId)
}