angular - Comment créer une popup modale compatible avec Angular 4

Vérifier Angulaire Matériel De Dialoguevoici la 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>) {}
}

La accepté de répondre ajoute une grande dépendance d'écraser une mouche. Modal (et non modale) les dialogues sont en grande partie le résultat d'une classe CSS ou deux. Essayez cette "renommer..." exemple:

1) Écrire le parent et l'enfant-modale comme si l'enfant n'est pas modale, mais juste une ligne de forme avec *ngIf ci-joint.

Parent HTML qui utilise <my-modal> enfant:

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

Classe Parent. Le @Component décorateur omis par souci de concision. (Le name propriété appartient à la classe parent et existerait même si nous n'avions pas une forme de la modifier.)

export class AppComponent {
    name = "old name";

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

}

Enfant à être modale composant. @Component décorateur et importations de nouveau omis.

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

Enfant de HTML avant modal-izing.

<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) Voici le CSS pour enfant, mais il peut être placé dans une feuille de style pour les ré-utiliser dans votre application. C'est une classe unique appelé modal et est prévu pour une <div> élément.

.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;
}

Mais la modal classe CSS qui ne l'empêchera pas d'interagir avec la page en dessous. (Donc techniquement crée une boîte de dialogue non modale.) Nous avons donc passer une overlay sous la modale d'absorber et d'ignorer l'activité de souris. overlay est également prévu pour un <div> élément.

.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) Utiliser le modal et overlay de l'enfant 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>

Et c'est tout. Fondamentalement, 2 classes CSS et vous pouvez faire toute composante modale. En fait, vous pouvez afficher un élément en-ligne ou comme un modal au moment de l'exécution juste en modifiant l'existence de la classe CSS avec ngClass ou [class.modal]="showAsModalBoolean".

Vous pouvez modifier ce de sorte que l'enfant contrôles de l'exposition/masquer la logique. Déplacer le *ngIf, showIt, et show() dans l'enfant. Dans le parent ajouter @ViewChild(MyModalComponent) renameModal: MyModalComponent; et puis le parent peut impérativement appeler this.renameModal.show(this.name); et re-câbler l'initialisation et contenant des divs en tant que de besoin.

L'enfant-modale peut retourner les informations à un parent fonction comme indiqué ci-dessus, ou de l'enfant show() méthode pourrait accepter plutôt un rappel ou un retour d'une Promesse, que par le goût.

Deux choses à savoir:

this.renameModal.show(..); ne fonctionnera pas si il y a un *ngIf sur <my-modal> car il n'existe pas d'exposer la fonction pour commencer. *ngIf supprime le composant entier, show() et la fonction de tous, afin de l'utiliser [hidden] à la place si vous en avez besoin pour une raison quelconque.

Les auxiliaires modaux-sur-modaux aura z-index problèmes, car ils partagent tous le même z-index. Cela peut être résolu avec [style.z-index]="calculatedValue" ou similaire.

Vous devez vous connecter pour publier un commentaire.