example - Cómo crear una ventana emergente modal que sea compatible con Angular 4

popup angular 4

Question

Quiero poder crear una ventana emergente que cargará un determinado componente Angular 4 mío cuando se seleccione un botón de opción.

Parece que los métodos enumerados en las respuestas a esta question solo son compatibles con Angular 2.

No estoy seguro de por dónde empezar y agradecería cualquier ayuda!

Answer 1

La respuesta aceptada agrega una gran dependencia para golpear una mosca. Los diálogos modales (y sin modelo) son en gran medida el resultado de una clase de CSS o dos. Prueba este ejemplo de "renombrar ...":

1) Escriba el padre y niño-modal como si el niño no fuera modal en absoluto, sino simplemente un formulario en línea con * ngIf adjunto.

HTML padre que usa <my-modal> hijo:

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

Clase de padres El decorador @Component omitido por brevedad. (La propiedad de name pertenece a la clase principal y existiría incluso si no tuviéramos un formulario para modificarla).

export class AppComponent {
    name = "old name";

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

}

Componente niño-a-ser-modal. Decorador de @Component e importaciones nuevamente omitidas.

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

HTML del niño antes de modalizarlo.

<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) Aquí está el CSS para niños, pero se puede colocar en una hoja de estilo global para reutilizarlo en toda la aplicación. Es una clase única llamada modal y está diseñada para un elemento <div> .

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

Pero la clase modal CSS no evitará interactuar con la página debajo de ella. (Así que técnicamente crea un diálogo sin modelo). Por lo tanto, colocamos una overlay debajo del modal para absorber e ignorar la actividad del mouse. overlay también está destinada a un elemento <div> .

.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) Utilice el modal y la overlay en el HTML hijo.

<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>

Y eso es. Básicamente 2 clases de CSS y puedes hacer que cualquier componente sea modal. De hecho, puede mostrar un componente en línea o como un modal en el tiempo de ejecución simplemente modificando la existencia de la clase CSS con ngClass o [class.modal]="showAsModalBoolean" .

Puede modificar esto para que el niño controle la lógica de mostrar / ocultar. Mueva la función * ngIf, showIt y show () en el elemento secundario. En el elemento principal, agregue @ViewChild(MyModalComponent) renameModal: MyModalComponent; y luego el padre puede llamar imperativamente a this.renameModal.show(this.name); y vuelva a conectar la inicialización y los divs que contienen según sea necesario.

El modo infantil puede devolver información a la función de un padre como se muestra arriba, o el método show() del niño podría aceptar una devolución de llamada o devolver una promesa, según el gusto.

Dos cosas que debes saber:

this.renameModal.show(..); no funcionará si hay un * ngIf en <my-modal> porque no existirá para exponer la función, para empezar. * ngSi elimina todo el componente, la función show () y todo, entonces use [hidden] en su lugar si necesita esto por alguna razón.

Modals-on-modals tendrá problemas con el índice z, ya que todos comparten el mismo índice z. Esto se puede resolver con [style.z-index]="calculatedValue" o similar.

Answer 2

Verifique el Diálogo de Material Angular , aquí está el 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>) {}
}