本文共 1003 字，大约阅读时间需要 3 分钟。

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

ongOnInit() {
  // 接收路由传值
  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;
    }
  });
}

通过 queryParams 方法可以接收路由参数，获取 orderid 和 totalcost 等值。接着调用 requestData 方法进行数据获取。最后根据传值设置状态，并通过 *ngif 指令控制条件显示不同的控件。

   
  
    
     
    提交
  
    
   
   
  
    
     
    取消订餐
  
    
   

通过设置 flagState 标志位，分别控制显示提交按钮和取消按钮。这是根据 listtostate.State 状态进行的逻辑判断，确保界面根据不同参数值进行动态更新。

整理优化代码后，效果图可展示以下情况：

优化后的代码不仅保留了核心功能，还对 innerHTML 和图片加载进行了优化，建议在正式应用前查看页面性能。

最终代码实现如下：

   
 CONCATENATE YOUR CODE HERE
   
 CONCATENATE YOUR CODE HERE

请确保自定义图片路径和组件类名等信息正确无误。如有需调整请根据实际项目需求进行修改。