通过Ionic中的routerLink将值传递给其他组件

vyswwuz2  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(172)

我想将值传递给另一个组件,例如:一个国家的名称,并在另一个组件上使用它
我创建了这样的链接,我想将值“France”发送到另一个组件(通过dataHere):

<ion-card-header>
    <ion-img class="logo-flag-greece" alt="mylogo" ></ion-img>
    <span routerLink="/tabs/result" dataHere="France" class="text">France</span>

  </ion-card-header>

我该怎么做?

ewm0tg9j

ewm0tg9j1#

在html文件中

<ion-card-header>
    <ion-img class="logo-flag-greece" alt="mylogo" ></ion-img>
    <span (click)="show_result()" dataHere="France" class="text">France</span>
  </ion-card-header>

在ts文件

import {Router} from "@angular/router";
  ...
  ...
  constructor(private router:Router){}

show_result(){
this.router.navigate(["/tabs/result"],{
  queryParams: {
    data: your_data
  }
}); 
}


和result.page.ts文件中

import {ActivatedRoute} from "@angular/router";
   ...
   ...
   constructor(private activatedRoute:ActivatedRoute){}
ionViewDidEnter(){
this.activatedRoute.queryParams.subscribe(params => {
    this.country_data = params['data'];
  });

}

但是我不建议这样做。相反,使用“service”。你可以通过这种方式将数据从一个页面传递到另一个页面。了解更多关于https://edupala.com/ionic-service/中的service的信息

相关问题