Чтобы вызвать компонент внутри компонента Dialog в угловом материале

Question

У меня есть 2 компонента, которые называются
1) demo
2) add-customer

В demo компоненте у меня есть кнопка , называемая add.При нажатии на кнопку вызывается функция (например, openDialog () ), чтобы открыть окно диалоговое окно (я, электронное операционное окно). Теперь я хочу вызвать компонент add-customerвнутри этого диалогового окна окна.
Как я могу это сделать.Вот ссылка stackblitz .

Answer 1

Сначала необходимо добавить компонент, который вы хотите создать динамически, в качестве компонента ввода модуля.

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

Затем вы должны использовать метод, предоставляемый угловым материалом, чтобы добавить созданный вами компонент.нужно как

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

Это должно работать как положено.

Вы можете видеть, что это работает Здесь

Answer 2

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();
    }