Angular实现组件在Dialog中动态显示关闭按钮方案

针对你提出的A组件在普通场景不显示关闭按钮、在Dialog中显示关闭按钮的需求，有两种优雅的实现方式：

方式一：通过MatDialogRef自动判断组件是否处于Dialog中 #

Angular Material的Dialog在打开组件时，会自动向组件注入MatDialogRef实例。我们可以利用这一点，结合@Optional()和@SkipSelf()装饰器，判断组件是否处于Dialog环境中：

修改A组件代码： #

1. 导入所需依赖：

import { Component, Optional, SkipSelf } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
// 其他原有导入保持不变

2. 在组件类中注入MatDialogRef：

export class AComponent {
  form: FormGroup;

  constructor(
    @Optional() @SkipSelf() public dialogRef: MatDialogRef<AComponent> | null
  ) {
    this.form = new FormGroup({
      email: new FormControl(''),
    });
  }

  closeDialog() {
    this.dialogRef?.close();
  }
}

3. 在模板中添加条件渲染的关闭按钮：

<form [formGroup]="form" class="">
  <h1>App A</h1>

  <!-- 原有表单内容保持不变 -->
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input
      matInput
      type="email"
      formControlName="email"
      placeholder="Ex. pat@example.com "
    />
  </mat-form-field>

  <button mat-button type="button" color="primary">Save</button>
  
  <!-- 仅在Dialog环境中显示关闭按钮 -->
  <button *ngIf="dialogRef" mat-button type="button" color="warn" (click)="closeDialog()">
    关闭
  </button>
</form>

原理：当组件在Dialog中打开时，MatDialogRef会被正常注入；当组件直接渲染时，@Optional()会让这个依赖变为null，从而通过*ngIf隐藏按钮。

方式二：通过输入属性显式控制 #

如果你希望更显式地控制按钮显示，也可以给A组件添加输入属性，由调用方决定是否显示关闭按钮：

修改A组件代码： #

1. 添加输入属性：

import { Component, Input } from '@angular/core';
// 其他原有导入保持不变

export class AComponent {
  form: FormGroup;
  @Input() showCloseButton = false;

  constructor() {
    this.form = new FormGroup({
      email: new FormControl(''),
    });
  }

  closeDialog() {
    // 若通过Dialog打开，可注入MatDialogRef实现关闭；或让调用方处理关闭逻辑
    // 此处结合方式一的注入逻辑也可，或直接通过DialogRef的实例操作
  }
}

2. 模板中根据输入属性渲染按钮：

<!-- 原有内容保持不变 -->
<button *ngIf="showCloseButton" mat-button type="button" color="warn" (click)="closeDialog()">
  关闭
</button>

修改B组件的Dialog调用逻辑： #

打开Dialog时直接设置组件实例的输入属性：

public openDialog() {
  const dialogRef = this.dialog.open(AComponent, {});
  dialogRef.componentInstance.showCloseButton = true;
  
  // 若需要组件内部关闭Dialog，可结合方式一注入MatDialogRef，或在此处传递关闭方法
  dialogRef.afterClosed().subscribe((res) => {
    console.log(res);
  });
}

优缺点对比：

• 方式一更自动化，不需要调用方额外传参，适合组件复用场景；
• 方式二更显式，可控性更强，适合需要灵活控制的场景。

内容的提问来源于stack exchange，提问作者coder