如何在 HTML 中与路由器 Link 一起传递数据？

Question

我正在尝试在 HTML 中与路由器 Link 一起传递数据。我搜索了 google 仍然无法找到答案。我什至尝试将数据存储在服务中，但它无法存储数据。

下面是HTML代码，我想把数据outpatientRegdList?.prn和routerlink一起传递。

<div class="pandora-box" *ngFor="let outpatientRegdList of outpatientRegdList">
   <div *ngIf="outpatientRegdList?.sexCode ==='F' || outpatientRegdList?.sexCode ==='f'">
      <ion-row class="pandora-wisdom" routerLink="outpatient-settings">
        <ion-col class="pandora-joy">
           {{ outpatientRegdList?.prn     }}<br>
           <strong>{{outpatientRegdList?.title}} {{outpatientRegdList?.firstName}}
                  {{outpatientRegdList?.middleName}} {{outpatientRegdList?.lastName}}</strong><br>             
        </ion-col>
      </ion-row>
   <div>
</div>

希望有人能在这方面帮助我。

Answer 1

您可以像这样通过 queryParams 在 url 中发送数据

<div *ngIf="outpatientRegdList?.sexCode ==='F' || outpatientRegdList?.sexCode ==='f'">
      <ion-row class="pandora-wisdom" routerLink="outpatient-settings" [queryParams]="{ yourQueryFieldName: outpatientRegdList?.prn }">
        <ion-col class="pandora-joy">
           {{ outpatientRegdList?.prn     }}<br>
           <strong>{{outpatientRegdList?.title}} {{outpatientRegdList?.firstName}}
                  {{outpatientRegdList?.middleName}} {{outpatientRegdList?.lastName}}</strong><br>             
        </ion-col>
      </ion-row>
   <div>

导航后，您可以使用 ActivatedRoute

访问页面中的 queryParams

 constructor(private route: ActivatedRoute) { }
 ngOnInit() {
    this.route.queryParams
      .filter(params => params.yourQueryFieldName)
      .subscribe(params => {
        console.log(params); // {yourQueryFieldName: outpatientRegdList?.prn}
      });
  }

如何在 HTML 中与路由器 Link 一起传递数据？

How to pass a data together with a router Link in HTML?

ionic4