Jak dynamicky vytvořit komponentu dialogu v Angular

V rodičovské komponentě

Nejprve musíte importovat ViewContainerRef z @angular/core.

create_dialog_component.ts

import { ViewContainerRef } from '@angular/core';

import { ViewContainerRef } from '@angular/core';

Poté musíte injektovat ViewContainerRef do vaší komponenty.

inject_viewcontainer.ts

constructor(private viewContainer: ViewContainerRef) {
}

constructor(private viewContainer: ViewContainerRef) {
}

Nyní můžete přidat tuto metodu pro vytvoření a zobrazení dialogové komponenty:

show_dialog_method.ts

  showMyDialog(): void {
    const component = this.viewContainer.createComponent(MyDialogComponent);
    // Můžete přistupovat k JAKÉKOLI veřejné metodě třídy z MyDialogComponent
    component.instance.setVisible(true);
  }

  showMyDialog(): void {
    const component = this.viewContainer.createComponent(MyDialogComponent);
    // Můžete přistupovat k JAKÉKOLI veřejné metodě třídy z MyDialogComponent
    component.instance.setVisible(true);
  }

Dialogová komponenta

Tato komponenta je opravdu ničím speciální. Je to jen dialog s některými metodami jako setVisible() vystavenými ven.

my_dialog_component.ts

export class MyDialogComponent {
  visible = false;

  constructor() {
  }

  public setVisible(visible: boolean = true) {
    this.visible = visible;
  }

  submit() {
    // TODO: Co udělat, když je dialog odeslán
  }
}

export class MyDialogComponent {
  visible = false;

  constructor() {
  }

  public setVisible(visible: boolean = true) {
    this.visible = visible;
  }

  submit() {
    // TODO: Co udělat, když je dialog odeslán
  }
}

my_dialog.component.html

<p-dialog header="My dialog" [(visible)]="visible" [modal]="true">
  <div class="input-container">
    <!-- TODO přidejte obsah vašeho dialogu sem -->
  </div>
    <!-- POZNÁMKA: Jen jako příklad, tlačítka "Uložit" a "Zrušit" -->
  <div class="row button-row mt-3">
    <span class="p-buttonset">
      <p-button pRipple icon="pi pi-check" (click)="submit()" label="Save"></p-button>
      <p-button pRipple severity="danger" icon="pi pi-times" (click)="visible=false" label="Abort"></p-button>
    </span>
  </div>
</p-dialog>

<p-dialog header="My dialog" [(visible)]="visible" [modal]="true">
  <div class="input-container">
    <!-- TODO přidejte obsah vašeho dialogu sem -->
  </div>
    <!-- POZNÁMKA: Jen jako příklad, tlačítka "Uložit" a "Zrušit" -->
  <div class="row button-row mt-3">
    <span class="p-buttonset">
      <p-button pRipple icon="pi pi-check" (click)="submit()" label="Save"></p-button>
      <p-button pRipple severity="danger" icon="pi pi-times" (click)="visible=false" label="Abort"></p-button>
    </span>
  </div>
</p-dialog>

Mohli byste také implementovat @Output() pro vyslání události, když uživatel klikne na tlačítko Save.

my_dialog_output.ts

export class MyDialogComponent {
  // Typicky byste vyslali komplexnější datový typ.
  @Output() saved = new EventEmitter<string>();

  submit() {
    this.saved.emit("some data");
  }
}

export class MyDialogComponent {
  // Typicky byste vyslali komplexnější datový typ.
  @Output() saved = new EventEmitter<string>();

  submit() {
    this.saved.emit("some data");
  }
}