Wie man ein modales Popup erstellt, das mit Angular 4 kompatibel ist

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

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

Ich bin nicht sicher, wo ich anfangen soll und wäre für jede Hilfe dankbar!

Community
Bearbeitete Frage 23. Mai 2017 в 12:10
Programmierung
modal-dialog popup angular typescript
21. April 2017 в 3:29
noch keine Aufrufe

Die akzeptierte Antwort fügt eine große Abhängigkeit hinzu, um eine Fliege zu erschlagen. Modal (und modeless) Dialoge sind weitgehend das Ergebnis einer CSS-Klasse oder zwei. Versuchen Sie diese "umbenennen..." Beispiel:

  1. Schreiben Sie das Parent- und Child-Modal so, als wäre das Child gar nicht modal, sondern nur ein Inline-Formular mit angehängtem *ngIf.

Parent-HTML, das `` child verwendet:

<div>
    A div for {{name}}.
    Rename

</div>

Übergeordnete Klasse. Der @Component Dekorator wurde der Einfachheit halber weggelassen. (Die Eigenschaft "Name" gehört zur übergeordneten Klasse und würde auch 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;
    }

}

Kind zu-modale Komponente. @Component Dekorator und Importe wieder weggelassen.

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

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

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

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

Kind-HTML, bevor es modalisiert wird.

<div>
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    OK
    Cancel
</div>
  1. Hier's die CSS für Kind, aber es kann in einem globalen Stylesheet für die Wiederverwendung in Ihrer App platziert werden. Es handelt sich um eine einzelne Klasse namens modal und ist für ein `
    -Element bestimmt. 
.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;
}

Aber die CSS-Klasse "modal" verhindert nicht die Interaktion mit der Seite darunter. (Also platzieren wir ein Overlay unter dem Modal, um Mausaktivitäten zu absorbieren und zu ignorieren. Das overlay ist auch für ein `

-Element gedacht.

.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;
}
  1. Verwenden Sie das modal und overlay in der untergeordneten HTML.
<div class="modal">
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    OK
    Cancel
</div>
<div class="overlay"></div>

Und das's it. Im Grunde genommen 2 CSS-Klassen und Sie können jede Komponente in ein Modal verwandeln. Tatsächlich können Sie eine Komponente in-line oder als Modal zur Laufzeit anzeigen, indem Sie einfach die Existenz der CSS-Klasse mit ngClass oder [class.modal]="showAsModalBoolean" ändern.

Sie können dies so ändern, dass das Kind die Logik des Ein- und Ausblendens kontrolliert. Verschieben Sie die Funktionen *ngIf, showIt und show() in das Child. Fügen Sie im übergeordneten Element @ViewChild(MyModalComponent) renameModal: MyModalComponent; hinzu, und dann kann das übergeordnete Element zwingend this.renameModal.show(this.name); aufrufen und die Initialisierung und die enthaltenen Divs nach Bedarf neu verdrahten.

Das Kind-Modal kann Informationen an eine Elternfunktion zurückgeben, wie oben gezeigt, oder die Kind-Methode "show()" könnte stattdessen einen Callback akzeptieren oder ein Promise zurückgeben, je nach Geschmack.

Zwei Dinge sind zu beachten:

this.renameModal.show(..); wird nicht funktionieren, wenn es ein ngIf auf `` gibt, weil es nicht existieren wird, um die Funktion zu exponieren, um mit zu beginnen. ngIf entfernt die gesamte Komponente, show()-Funktion und alles, so verwenden Sie [hidden] stattdessen, wenn Sie dies aus irgendeinem Grund benötigen.

Modals-on-modals werden z-index Probleme haben, da sie alle den gleichen z-index haben. Dies kann mit [style.z-index]="calculatedValue" oder ähnlichem gelöst werden.

Ron Newcomb
Bearbeitete Antwort 4. März 2018 в 4:43
Kommentare (4)
Lösung

Prüfen Sie Angular Material Dialogue, hier ist der 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) {}
}
Madhu Ranjan
Bearbeitete Antwort 26. Juli 2017 в 1:11
Kommentare (9)