it-swarm.com.de

So erstellen Sie ein modales Popup, das mit Angular 4

Ich möchte in der Lage sein, ein Popup-Fenster zu erstellen, das eine bestimmte Angular 4 Komponente von mir lädt, wenn ein Optionsfeld ausgewählt wird.

Es scheint, dass die in den Antworten auf diese Frage aufgelisteten Methoden nur mit Angular 2 kompatibel sind.

Ich bin mir nicht sicher, wo ich anfangen soll und würde mich über jede Hilfe freuen!

19
Luca Guarro

Aktivieren Sie Angular Material Dialogue , hier ist Plunker

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}
13
Madhu Ranjan

Die akzeptierte Antwort fügt eine große Abhängigkeit hinzu, um eine Fliege zu schlagen. Modale (und nicht modale) Dialoge sind größtenteils das Ergebnis einer oder zweier CSS-Klassen. Versuchen Sie dieses "Umbenennen ..." - Beispiel:

1) Schreiben Sie das übergeordnete und das untergeordnete modale Element so, als ob das untergeordnete Element überhaupt nicht modal wäre, sondern nur ein Inline-Formular mit * ngIf als Anhang.

Übergeordnetes HTML, das das untergeordnete Element <my-modal> Verwendet:

<div>
    A div for {{name}}.
    <button type="button" (click)="showModal()">Rename</button>
    <my-modal *ngIf="showIt" [oldname]="name" (close)="closeModal($event)"></my-modal>
</div>

Elternklasse. Der @Component - Dekorateur wurde der Kürze halber weggelassen. (Die Eigenschaft name gehört zur übergeordneten Klasse und würde auch dann existieren, wenn wir kein Formular hätten, um sie zu ändern.)

export class AppComponent {
    name = "old name";

    showIt = false;
    showModal() {
        this.showIt = true;
    }
    closeModal(newName: string) {
        this.showIt = false;
        if (newName) this.name = newName;
    }

}

Untergeordnete modale Komponente. @Component Dekorateur und Importe wieder weggelassen.

export class MyModalComponent {
    @Input() oldname = "";
    @Output() close = new EventEmitter<string>();
    newname = "";

    ngOnInit() {
        // copy all inputs to avoid polluting them
        this.newname = this.oldname; 
    }

    ok() {
        this.close.emit(this.newname);
    }

    cancel() {
        this.close.emit(null);
    }
}

Untergeordnetes HTML, bevor es modalisiert wird.

<div>
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    <button type="button" (click)="ok()">OK</button>
    <button type="button" (click)="cancel()">Cancel</button>
</div>

2) Hier ist das CSS für untergeordnete Elemente, es kann jedoch in einem globalen Stylesheet abgelegt und in der gesamten App wiederverwendet werden. Es ist eine einzelne Klasse mit dem Namen modal und ist für ein <div> - Element vorgesehen.

.modal {
    /* detach from rest of the document */
    position: fixed;

    /* center */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* ensure in front of rest of page -- increase as needed */
    z-index: 1001;

    /* visual illusion of being in front -- alter to taste */
    box-shadow: rgba(0,0,0,0.4) 10px 10px 4px;

    /* visual illusion of being a solid object -- alter to taste */
    background-color: lightblue;
    border: 5px solid darkblue;

    /* visual preference of don't crowd the contents -- alter to taste */
    padding: 10px;
}

Die CSS-Klasse modal verhindert jedoch nicht die Interaktion mit der darunter liegenden Seite. (Es wird also technisch gesehen ein modelloser Dialog erstellt.) Wir platzieren also ein overlay unter dem Modal, um die Mausaktivität zu absorbieren und zu ignorieren. overlay ist auch für ein <div> - Element vorgesehen.

.overlay {
    /* detach from document */
    position: fixed;

    /* ensure in front of rest of page except modal */
    z-index: 1000;

    /* fill screen to catch mice */
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;

    /* dim screen 20% -- alter to taste */
    opacity: 0.2;
    background-color: black;
}

3) Verwenden Sie im untergeordneten HTML die Zeichen modal und overlay.

<div class="modal">
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    <button type="button" (click)="ok()">OK</button>
    <button type="button" (click)="cancel()">Cancel</button>
</div>
<div class="overlay"></div>

Und das ist es. Grundsätzlich 2 CSS-Klassen und Sie können jede Komponente modalisieren. Tatsächlich können Sie eine Komponente zur Laufzeit in der Zeile oder als Modal anzeigen, indem Sie die Existenz der CSS-Klasse mit ngClass oder [class.modal]="showAsModalBoolean" Ändern.

Sie können dies so ändern, dass das untergeordnete Element die Anzeigen/Ausblenden-Logik steuert. Verschieben Sie die Funktionen * ngIf, showIt und show () in das untergeordnete Element. Fügen Sie im übergeordneten Element @ViewChild(MyModalComponent) renameModal: MyModalComponent; hinzu, und dann kann das übergeordnete Element this.renameModal.show(this.name); unbedingt aufrufen und die Initialisierung neu verbinden und Divs nach Bedarf enthalten.

Der Child-Modal kann Informationen wie oben gezeigt an die Funktion eines Elternteils zurückgeben, oder die show() -Methode des Kindes könnte stattdessen einen Rückruf annehmen oder ein Versprechen zurückgeben, je nach Geschmack.

Zwei Dinge zu wissen:

this.renameModal.show(..); funktioniert nicht, wenn ein * ngIf für <my-modal> angegeben ist, da die Funktion zunächst nicht verfügbar gemacht werden kann. * ngWenn die gesamte Komponente entfernt wird, show () - Funktion und alle, verwenden Sie stattdessen [hidden], wenn Sie dies aus irgendeinem Grund benötigen.

Modals-on-Modals haben Probleme mit dem Z-Index, da alle denselben Z-Index verwenden. Dies kann mit [style.z-index]="calculatedValue" Oder ähnlichem gelöst werden.

17
Ron Newcomb