我有2个组件,称为
1)demo
2)add-customer
在demo
组件中,有一个名为添加的按钮。点击按钮后,会调用一个函数(例如 openDialog())打开对话框窗口(即弹出窗口)。现在,我想调用{{ 1}}组件位于此对话框窗口中。
我怎样才能做到这一点。这是stackblitz链接。
答案 0 :(得分:3)
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();
}
答案 1 :(得分:2)
首先必须将要动态创建的组件添加为模块的输入组件。
@NgModule({
imports: [
],
declarations: [
AppComponent,
DemoComponent,
AddCustomerComponent,
],
bootstrap: [AppComponent],
providers: [],
entryComponents: [AddCustomerComponent] // This line
})
然后,您必须使用棱角材料公开的方法来添加创建所需的组件
let dialogRef = dialog.open(AddCustomerComponent, {
height: '400px',
width: '600px',
});
这应该可以正常工作。
您可以在Here上看到它工作