在角度材质中调用Dialog组件内的组件

时间:2018-09-28 09:03:48

标签: angular angular-material

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

demo组件中,有一个名为添加的按钮。点击按钮后,会调用一个函数(例如 openDialog())打开对话框窗口(即弹出窗口)。现在,我想调用{{ 1}}组件位于此对话框窗口中。
 我怎样才能做到这一点。这是stackblitz链接。

2 个答案:

答案 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上看到它工作