ionic4 根据不同的参数值显示不同的控件

最新推荐文章于 2020-12-21 10:50:19 发布

原创最新推荐文章于 2020-12-21 10:50:19 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

ionic4 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Ionic4中根据路由传值动态显示不同控件。通过在组件的ngOnInit生命周期钩子中订阅activatedRoute.queryParams，可以获取传值并据此调整组件状态。根据listtostate.State的值改变flagState布尔值，从而决定特定按钮是否显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic4 根据不同的参数值显示不同的控件，这些东西要写到你要跳转的那个组件里面

page.ts

 ngOnInit() {
    //接收路由传值
    this.activatedRoute.queryParams.subscribe((result) => {
      console.log(result);
      this.listorderid = result;
      this.listtotalcost = result;
      this.requestData(result.orderid);
      //根据传值显示不同的控件
      this.listtostate.State = "待取餐";
      if (this.listtostate.State == "待提交") {
        this.flagState = true;

      }
      else {
        this.flagState = false;
      }
    }
    )
  }

html文件

<div class="orderdetails_button" *ngIf="flagState">
    <ion-button (click)="Addorder()">
      提交
    </ion-button>
  </div>
  <div class="orderdetails_button" *ngIf="!flagState">
  <ion-button (click)="Addorder()">
      取消订餐
    </ion-button>

在这里插入图片描述