如何基于函数参数动态创建取消按钮对象并配置到Alert弹窗中

问题根因 #

你遇到的作用域问题本质是const/let声明的变量属于块级作用域，在if代码块内部定义的cancelButton变量只能在块内部访问，外部无法读取。

可选解决方案 #

方案1：提前构造buttons数组（可读性最高） #

先初始化包含OK按钮的基础数组，再根据cancel参数判断是否追加取消按钮，最后直接传入alert配置即可。

async presentAlert(header: string, message: string, cancel?: boolean) {
  // 初始化基础按钮数组
  const buttons = [
    {
      text: 'OK',
      handler: () => {
        this.goBack();
      },
    }
  ];

  // 条件判断追加取消按钮
  if (cancel) {
    buttons.push({
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
    });
  }

  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: header,
    message: message,
    buttons: buttons
  });

  await alert.present();
}

方案2：数组展开运算符+短路逻辑（写法更简洁） #

如果追求代码精简，可以利用ES6特性实现内联的条件插入，参数为false时自动过滤空数组，不会产生多余元素。

async presentAlert(header: string, message: string, cancel?: boolean) {
  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: header,
    message: message,
    buttons: [
      {
        text: 'OK',
        handler: () => {
          this.goBack();
        },
      },
      // 条件为真时展开取消按钮配置，为假时展开空数组无任何元素
      ...(cancel ? [{
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
      }] : [])
    ],
  });

  await alert.present();
}

内容的提问来源于stack exchange，提问作者Furkan Öztürk