Angular-Material弹窗通过参数设置按钮是否可用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

今天碰到一个需求是一个弹窗，显示收货仓库并让用户确认是否发货，如果没有收货仓库则确认按钮设置为不可选中。
由于之前的弹窗只是一个显示文本+确认取消按钮的简单框，于是新增一个设置是否设置确认按钮不可选中的参数，感觉可以记录一下。

弹窗代码

弹窗的html按钮部分代码：

<button
    mat-raised-button 
    class="mat-accent mr-16 mat-raised-button" 
    (click)="dialogRef.close(true)"
    [disabled]="Disabled">确认
</button>

其中[disabled]="Disabled"也可以写为disabled="{{Disabled}}"
然后在ts部分设置参数Disabled

export interface ConfirmDialog {
  confirmText: string;
  Disabled: boolean;
}
export class ConfirmDialogComponent {
  /**
   * @param {MatDialogRef<ConfirmDialogComponent>} dialogRef
   * @param _data // 接收的数据
   */
  confirmText = ''; // 弹框文字内容
  Disabled = false; // 确认按钮是否可用，默认可用
  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: ConfirmDialog,
    public dialogRef: MatDialogRef<ConfirmDialogComponent>) {
    this.confirmText = _data ? _data.confirmText : '确认删除此数据!';
    this.Disabled = _data ? _data.Disabled : false;
  }
}

注意默认最好为false，因为该确认弹窗其他部分也调用过，并没有传参Disabled，如果不设置默认值或默认为true会导致整个项目调用该弹窗的地方均无法确认

页面调用并传参代码

html部分需要将收货仓库传到ts部分

<button mat-stroked-button 
    (click)="Ship(row.transports_plans_split_id,row.to_warehouse)">点击发货</button>

transports_plans_split_id为识别不同订单的唯一标识 ts代码：

Ship(id, Warehouse: string): void {
    // 判断收货仓库是否为空，如有则可以确认，没有则无法确认
    let DisabledWarehouse: boolean;
    if (Warehouse === '' || Warehouse == null || Warehouse === undefined) {
      DisabledWarehouse = true;
      Warehouse = ' ';
    } else {
      DisabledWarehouse = false;
    }
    const ConfirmDialog = this._matDialog.open(ConfirmDialogComponent, {
      width: '400px',
      height: 'auto',
      data: {
        confirmText: `本批次发货的在途仓是：${Warehouse}。如果错误，请先确认收货仓库。如果收货仓库正确，请联系技术部修改。`,
        Disabled: DisabledWarehouse
      }
    });
    ……

注意函数参数的Warehouse: string不写:string的话会导致传的值为undefined
其实可以将DisabledWarehouse的值设置为false而不是boolean，然后省去else部分的代码，我之所以这样写是为了方便理解