[英]To call a component inside Dialog component in angular material
我有2个组件
1) demo
2) add-customer
在demo
组件中,我有一个名为添加的按钮 。 单击按钮后,将调用一个函数(ex openDialog() )以打开一个对话框窗口(即弹出窗口)。现在,我想在此对话框窗口中调用add-customer
组件。
我怎样才能做到这一点。 这是stackblitz链接。
您需要将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();
}
您必须首先将要动态创建的组件添加为模块的输入组件。
@NgModule({
imports: [
],
declarations: [
AppComponent,
DemoComponent,
AddCustomerComponent,
],
bootstrap: [AppComponent],
providers: [],
entryComponents: [AddCustomerComponent] // This line
})
然后,您必须使用棱角材质公开的方法来添加创建所需的组件
let dialogRef = dialog.open(AddCustomerComponent, {
height: '400px',
width: '600px',
});
这应该按预期工作。
你可以看到它在这里工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.