打开材质弹出窗口时如何将数据传递给组件答案

【问题标题】：How to pass data to a component when opening a material popup打开材质弹出窗口时如何将数据传递给组件
【发布时间】：2021-05-24 10:36:47
【问题描述】：

我有一个用于弹出窗口的组件包装器（Angular Material MatDialog）。在这个组件中，我使用 ngComponentOutlet 来动态显示子组件。

popup-shell.component.html

<mat-dialog-content class="mat-typography popup-shell">
    <div class="popup-shell__container">
        <ng-container *ngComponentOutlet="data.component"></ng-container>
    </div>
</mat-dialog-content>

popup-shell.component.ts

constructor(public dialogRef: MatDialogRef<PopupShellComponent>, @Inject(MAT_DIALOG_DATA) public data) {}

当角度打开弹出窗口时，我会在数据字段中传递有关应打开哪个弹出窗口的信息。

 constructor(private dialog: MatDialog) {}
 
 openPopup() {
     const dialogRef = this.dialog.open(PopupShellComponent, {
          data: { component: UserPopupComponent },
     });
 }

在 PopupShellComponent 中打开 UserPopupComponent 时如何将数据传递给它？

我知道我可以将注入器与 ngComponentOutlet 一起使用，但我无法制作工作版本。

【问题讨论】：

你已经注入了@Inject(MAT_DIALOG_DATA) public data。如果你console.log(data)，你没看到数据通过了吗？
@eko 我需要在打开 UserComponent 时将 User1、User2 等传递给 UserComponent。现在它只是静态组件
你检查了吗：stackoverflow.com/a/53547609/5706293？

标签： angular typescript angular-material

【解决方案1】：

请阅读以下博客，它将对您非常有帮助 Using Mat Dialog

【讨论】：