Angular MatDialog如何在其他组件模板指定位置打开弹窗

MatDialog 原生支持自定义弹窗挂载目标，不需要直接插入组件标签（这种方式绕过了MatDialog的生命周期控制，必然会出现常驻无法触发显隐的问题），核心是利用open方法的viewContainerRef配置项指定挂载容器，步骤如下：

• 第一步：标记目标挂载点，获取视图容器引用
  不要靠DOM id选节点，用Angular模板引用变量获取Angular上下文认可的视图容器实例。先修改放置挂载点的父组件模板：

<app-dialog-button [dialogMountRef]="dialogTargetRef"></app-dialog-button>
<flex-box>
  <!-- 给目标挂载位置加模板变量 -->
  <element3 id="dialog" #dialogTarget></element3>
  <element2></element2>
  <element1></element1>
</flex-box>

然后在父组件ts里拿到这个挂载点的引用：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({/* 你的父组件配置 */})
export class ParentComponent {
  @ViewChild('dialogTarget', { read: ViewContainerRef }) dialogTargetRef: ViewContainerRef;
}

• 第二步：修改弹窗触发组件，接收挂载点引用并传入MatDialog配置
  给DialogButtonComponent加输入属性接收父组件传过来的挂载点引用，在调用dialog.open时传入viewContainerRef配置：

import { Component, Input } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-button',
  templateUrl: './dialog-button.component.html',
  styleUrls: ['./dialog-button.component.scss']
})
export class DialogButtonComponent {
  @Input() dialogMountRef: ViewContainerRef;
  dialogRef: MatDialogRef<dialogButtonDialogComponent> | null = null;

  constructor(public dialog: MatDialog) { }

  toggleDialog() {
    const dialogOpened = this.dialog.getDialogById('dialog-button-dialog-container');
    if(!dialogOpened) {
      this.dialogRef = this.dialog.open(dialogButtonDialogComponent, {
        id: 'dialog-button-dialog-container',
        hasBackdrop: false,
        // 核心配置：指定弹窗挂载的目标容器
        viewContainerRef: this.dialogMountRef,
        // 自定义弹窗面板类，修改默认定位规则
        panelClass: 'inner-container-dialog'
      });
    } else {
      this.dialogRef.close();
      this.dialogRef = null;
    }
  }
}

• 第三步：调整样式适配容器内定位
  MatDialog默认弹窗面板是fixed全局定位，挂载到容器内部后需要修改定位规则，在全局样式文件（styles.scss）里添加自定义样式：

// 给弹窗的父级容器加相对定位，作为绝对定位的参照
flex-box {
  position: relative;
}

// 修改弹窗面板默认定位
.inner-container-dialog {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  // 按你的布局需求调整宽高、偏移即可
}

注意：如果需要弹窗跟随页面滚动、和内部元素位置对齐，只需要调整上面的定位样式即可，MatDialog的打开关闭、传值、生命周期等逻辑完全和全局挂载时一致，不需要额外修改。

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