使用Angular路由器在Ionic中无需导航即可传递数据

Question

I have a list which contains names of people, whenever I click to any of the items in the list, it will display to another page but not navigating to that path instead navigating to another page.

names.page.html:

<ion-content>
  <ion-list *ngFor='let listNames of people'>
    <ion-card (click)="passData(listNames)">
      <ion-card-header>
       <ion-card-title>{{ listNames.firstname }}</ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-list>
</ion-content>

names.page.ts:

passData(listNames) {
  this.router.navigate(['/pages/details', listNames]);
}

details.page.ts:

export class DetailsPage implements OnInit {

 public fName;

 constructor(public route: ActivatedRoute) { }

 ngOnInit() {
  const data = this.route.snapshot.paramMap.get('firstname');
  this.fname= data;
 }
}

I wanted to navigate to another screen after sending a data to display in details.page.html, thanks.

Answer 1

You can pass data using events class. It's used to pass data to any component/page without the navigation

import { Events } from '@ionic/angular';


constructor(public events: Events) { }

//Apply this code in received component/page

ngOnInit(){
this.events.subscribe('flag', (data) => {
  console.log(data);
  console.log(JSON.stringify(res))
});

}

//Use this code in data sender component/page

this.events.publish('flag', listNames);

Answer 2

Are your parameters in this.router.navigate() correct? Below is the sample from Angular- Routing, and navigation

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

It should look something like this, depending on where you run it:

localhost:4200/heroes;id=15;foo=foo

Check your one this.router.navigate(['/pages/details, listNames]); Looks like missing ' at the end of /pages/details

Hope this helps