angular - 以 Angular Material 调用 Dialog 组件内的组件

Question

我有 2 个组件称为
1) demo2) add-customer
在 demo组件我有一个 按钮 称为添加。单击按钮时，会调用一个函数(例如 openDialog() )来打开 对话 window(i,e op-up window)。现在我想调用add-customer这个里面的组件对话 window 。
我怎样才能做到这一点。这里是 stackblitz关联。

Answer 1

Demo.component.ts 您需要将组件“插入”到对话框中。

import {AddCustomerComponent} from '../add-customer/add-customer.component'

 openDialog(): void {
    const dialogRef = this.dialog.open(AddCustomerComponent, {
      width: '450px',
    });

app.module.ts，将对话框中加载的组件添加到entryComponents

declarations: [
    AppComponent,
    DemoComponent,
    AddCustomerComponent,
    ],
entryComponents: [
    AddCustomerComponent
],

编辑:要关闭取消，您必须在 add-customer.component.html 上的取消按钮上添加一个单击功能

<button mat-raised-button type="button" class="Discard-btn" (click)="cancel()">Cancel</button>

然后在 .ts 文件中添加函数并在构造函数中注入(inject) dialogRef

import {MatDialogRef} from '@angular/material';

constructor(private fb: FormBuilder,
              private dialogRef: MatDialogRef<AddCustomerComponent>) {}

    public cancel() {
       this.dialogRef.close();
    }