1

我正在使用角度材料打开对话框。我有很多组件在对话框中变得开放，但是为了很好地分离关注点，我想避免将对话框行为烘焙到组件中。我有一个名为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 一起使用？当我们决定在对话框中打开组件时，如何避免制作组件的对话框包装版本？

目前我正在创建一个新的对话框组件，例如 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 是否仍然可以以某种方式使用。

4

1 回答 1

3

我创建了一个 repo，其中包含一个将组件（表单）注入可重用材质对话框的基本示例，它将用户输入传递回启动对话框的父组件。

这是Stackblitz上的工作演示。

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

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

于 2020-05-14T10:54:37.500 回答