时间戳

首页 > 解决方案 > 以角材料调用 Dialog 组件内的组件

angular - 以角材料调用 Dialog 组件内的组件

问题描述

我有 2 个组件，称为
1) demo
2)add-customer

在demo组件中，我有一个名为 add的按钮。单击按钮时，会调用一个函数（例如openDialog()）来打开一个对话框窗口（即 op-up 窗口）。现在我想在此对话框窗口中调用add-customer组件。 我怎样才能做到这一点。这是stackblitz链接。

标签： angularangular-material

解决方案

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 文件中添加函数并在构造函数中注入 dialogRef

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

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

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

推荐阅读