Así que tengo un componente llamado custom-modal.component . El archivo HTML se ve así:
<dialog id="custom-modal"> <ng-content></ng-content> </dialog> En el archivo .ts tengo
this.modal = document.querySelector('#modal-custom'); // Buttons listeners to showModal() and close() methods...El problema surge si intento llamar a modal varias veces:
<button class="open-modal">See cards</button> <button class="open-modal">See flowers</button> <app-custom-modal> <app-cards></app-cards> </app-custom-modal> <app-custom-modal> <app-flowers></app-flowers> </app-custom-modal>Entonces, en Angular, esto terminará haciendo:
<button class="open-modal">See cards</button> <button class="open-modal">See flowers</button> *** NOTE that there's two *** <dialog id="custom-modal"> <div> <h1> Cards title </h1> </div> </dialog> <dialog id="custom-modal"> <div> <h1> Flowers title </h1> </div> </dialog>El querySelector no funcionará ya que solo selecciona el primero. Puedo hacer un querySelectorAll y recorrer cada modal, pero luego no tengo una forma de asignar el botón de escucha para mostrar el modal correcto (o no sé cómo hacerlo).
No sé si hay una mejor manera de resolver esto, solo quiero que sea completamente reutilizable. Perdón por las preguntas de novato, ya que soy desarrollador Junior. Gracias por adelantado.
Una parte importante de esto es tener en cuenta dónde desea manejar el estado abierto/cerrado de su diálogo.
En este caso, lo está haciendo en el componente que aloja el modal. Lo que podría hacer es pasar una Entrada, digamos visible, al modal que indica el estado abierto/cerrado. También puede definir una Salida que le notifique si se ordenó que el modal se cerrara desde dentro del componente modal.
También recomiendo que use ViewChild en el componente modal en lugar de document.querySelector(...). Tenga en cuenta que con el uso de ViewChild, lo más probable es que tenga que usar el enlace de ciclo de vida AfterViewInit.
Archivo .ts de CustomModalComponent
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core'; // ... the rest of import @Component({ // ... Component decorator props (selector, templateUrl, styleUrls) }) export class CustomModalComponent implements OnInit, AfterViewInit { @ViewChild('modalRef') modalRef: ElementRef; @Input() visible: boolean; // Optional if you want to close the dialog from here and notify the parent (host) @Output() closed = new EventEmitter(); constructor() { } ngAfterViewInit(): void { // Print the HTMLElement of the modal console.log(this.modalRef.nativeElement); // Do your thing } close() { this.closed.emit(); // ... } // ... the rest of the component }.html de CustomModalComponent
<dialog #modalRef> <ng-content></ng-content> </dialog>Luego, cuando quieras usarlo en ParentComponent
En tu .html
<button class="open-modal" (click)="openCards()">See cards</button> <button class="open-modal" (click)="openFlowers()">See flowers</button> <app-custom-modal [visible]="visibleCards" (closed)="closeCards()"> <app-cards></app-cards> </app-custom-modal> <app-custom-modal [visible]="visibleFlowers" (closed)="closeFlowers()"> <app-flowers></app-flowers> </app-custom-modal>En tu .ts
import { Component } from '@angular/core'; // ... the rest of import @Component({ // ... Component decorator props (selector, templateUrl, styleUrls) }) export class ParentComponent { visibleCards: boolean; visibleFlowers: boolean; constructor() { } openCards() { this.visibleCards = true; // ... } openFlowers() { this.visibleFlowers = true; // ... } closeCards() { this.visibleCards = false; // ... } closeFlowers() { this.visibleFlowers = false; // ... } // ... the rest of the component }