Angular 在带有角度路由器的Ionic中无需导航即可传递数据

我有一个包含人名的列表，每当我单击列表中的任何项目时，它都会显示到另一个页面，但不会导航到该路径，而是导航到另一个页面

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>

details.page.ts：

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

export class DetailsPage implements OnInit {

 public fName;

 constructor(public route: ActivatedRoute) { }

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

---

在发送要在details.page.html中显示的数据后，我想导航到另一个屏幕，谢谢。

您可以使用events类传递数据。它用于在没有导航的情况下将数据传递到任何组件/页面

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


constructor(public events: Events) { }

//在收到的组件/页面中应用此代码

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

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

}

//在数据发送器组件/页面中使用此代码

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

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

---

this.router.navigate（）中的参数是否正确？
下面是来自

它应该是这样的，这取决于您运行它的位置：

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

检查你的一个
this.router.navigate（['/pages/details，listNames]）在/pages/details结尾处似乎缺少

希望这有助于
在console中尝试使用JSON.stringify。log（JSON.stringify（data））是否应该使用listNames而不是data？data是成功回调中的用户定义变量。因此，您可以根据需要更改该变量，但不会记录任何内容