在角度材质中调用对话框组件内的组件

Question

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

demo组件中，我有一个名为add的按钮。单击按钮时，将调用一个函数(例如openDialog(((来打开一个对话框窗口(即op-up窗口(。现在我想在此对话框窗口中调用add-customer组件。
我该怎么做。这是堆栈闪电战链接。

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，将对话框中加载的组件添加到条目组件

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

编辑：要在取消时关闭，您必须在添加客户组件上的取消按钮中添加单击功能.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();
}

Answer 2

您必须首先将要动态创建的组件添加为模块的入口组件。

@NgModule({
imports: [
],
declarations: [
AppComponent,
DemoComponent,
AddCustomerComponent,
],
bootstrap: [AppComponent],
providers: [],
entryComponents: [AddCustomerComponent] // This line
})

然后你必须使用角度材料暴露的方法添加创建你需要的组件作为

let dialogRef = dialog.open(AddCustomerComponent, {
height: '400px',
width: '600px',
});

这应该按预期工作。

你可以看到它在这里工作