在按钮单击离子上传递 URL答案

【问题标题】：Pass URL on button click ionic在按钮单击离子上传递 URL
【发布时间】：2020-12-27 20:08:27
【问题描述】：

我正在创建一个从 json url 读取数据的离子应用程序。有两页。

我想将按钮点击时的 url 从第一页传递到第二页，以便在第二页读取 url 并显示数据。

第一页：首页第二页：首页详情。

我的 home.html 如下所示：

<button ion-button color="primary" round full style="height: 50px;" (click)="start($event, item)" [disabled]="startbuttonDisabled">
START!
</button>

我的 home.ts 如下所示：

start(event: any,item: any) {
this.navCtrl.push(homedetailspage, {
item:item
});
}

我的 home-details.ts 如下所示：

constructor(public navCtrl: NavController, public navParams: NavParams, protected httpClient: HttpClient, public alertCtrl: AlertController) {

this.value = navParams.get('item');
console.log(this.value);

this.httpClient.get(this.value)
      .subscribe((res: any) => {
        this.jsonitems = res;
        },
      error=>{
        console.log(error);
      } );
}

我想将变量“item”中的 JSON url "assets/data/data.json" 传递给第二页 home-details.ts

请建议我在哪里做错了。

【问题讨论】：

如果你从构造函数中移除this.value = navParams.get('item');并把它放在ionViewWillEnter钩子中，它是否有效？
它工作，但我不得不移动完整的代码。

标签： javascript json angular ionic-framework

【解决方案1】：

进行了以下更改并解决了问题。

在 home.ts 中，更新后的代码如下：

start(event: any,item: any) {
this.navCtrl.push(homedetailspage, {
item:'assets/data/data.json'
});
}

在 home-details.ts 中，下面是更新后的代码（从构造函数中移除）：

ionViewDidLoad() {
    this.value = this.navParams.get('item');
    console.log("url", this.value);
   
    this.httpClient.get(this.value)
      .subscribe((res: any) => {
        this.fullbodyitems = res;
        },
      error=>{
        console.log(error);
      } );
  }

【讨论】：