避免以角度创建对话框包装器组件答案

【问题标题】：avoid creating dialog wrapper components in angular避免以角度创建对话框包装器组件
【发布时间】：2020-08-30 02:32:25
【问题描述】：

我正在使用有角度的材料来打开对话框。我有很多组件在对话框中变得开放，但是为了很好地分离关注点，我想避免将对话框行为烘焙到组件中。我有一个名为dashboard-dialog 的包装器组件，它有一个ng-content 区域并提供一些基本功能和样式。

我希望能够像使用 tsx/react 那样做这样的事情；

const dialogComp = `<app-dashboard-dialog><app-create-user-form (create)="handleCreate()" cancel="handleCancel()"></app-create-user-form></app-dashboard-dialog>`
this.dialog.open(dialogComp, { ... });

是否有类似的东西可以与 mat-dialog 一起使用？当我们决定在对话框中打开组件时，如何避免制作组件的对话框包装版本？

目前我正在创建一个新的对话框组件 ex create-user-form-dialog.component.ts，它具有与我希望的 dialogComp 变量相同的模板。现在打开这个新的对话框组件 this.dialog.open(CreateUserFormDialog, { ... });

对话框组件有对话框引用和数据注入。

@Component({
    selector: 'app-create-user-form-dialog',
    template: `
        <app-dashboard-dialog #dialog>
            <app-create-user-form
                [detail]="injected_detail"
                (create)="createUser($event)"
                (cancel)="cancel($event)"
            >
            </app-create-user-form>
        </app-dashboard-dialog>
    `,
    styleUrls: []
})

export class CreateUserFormDialogComponent {
    constructor(
        public dialogRef: MatDialogRef<CreateUserFormDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public injected_detail: Info
    ) {}

因此 create-user-form.component.ts 会发出其按钮的结果（保存、取消等），而 create-user-form-dialog.component.ts 通过 dialogref.close 方法将内容吐出。不确定这如何使情况复杂化，以及 ViewChild 是否仍然可以以某种方式使用。

【问题讨论】：

也许this article 就是您要找的。span>
我最近为一个项目做了这样的事情。您必须注入要在对话框中显示的组件，然后设置服务以将响应中继回启动对话框的组件，因为您不能使用输入或输出。最初需要付出很多努力，但这是可能的，而且您最终只得到了一个对话框组件。我看看能不能举个例子……
以下@Ken 运气好吗？

标签： angular viewchild mat-dialog

【解决方案1】：

created a repo 提供了一个将组件（表单）注入可重用材质对话框的基本示例，该对话框将用户输入传递回启动对话框的父组件。

这是Stackblitz 上的工作演示。

dialog-wrapper 是可复用的对话框组件
dialog-form 是一个组件被注入到dialog-wrapper 的示例，具有数据输入/输出所需的服务
name (Alice) 是数据从父组件传递到 dialog-form 的示例
DialogFormResponseService 在提交表单时使用 name 和来自 formControl faveFood 的值更新主题
父组件在打开dialog-wrapper 时订阅此服务，并在收到响应时关闭对话框

dialog wrapper 本身相当简单；大部分繁重的工作都在injected component 和parent component 中，但实际上这只是向您要注入对话框的组件添加两个服务以处理与父级通信的情况。

【讨论】：