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!
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:
Parent-HTML, das <my-modal>
child 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>
Ü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<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);
}
}
Kind-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>
modal
und ist für ein `.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 `
.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;
}
modal
und overlay
in der untergeordneten HTML.<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'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 <my-modal>
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.
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<DialogResultExampleDialog>) {}
}