No puedo alternar un modal de arranque usando Typescript. Estoy usando el Bootstrap 4 Modal predeterminado. Aquí está el código.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>Y aquí hay un botón que proporciona Bootstrap 4 para alternar el Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>No estoy usando este botón en mi aplicación. Quiero mostrar Modal a través de una función en uno de mis componentes Angular 2. He accedido al elemento html con el siguiente código.
ngOnInit() { this.modalElement = document.getElementById('myModal'); }Ahora necesito activar el modal para mostrarlo usando una llamada de método. No estaba a punto de encontrar una solución para hacer eso. Probé métodos como .show() y otras soluciones, pero ninguna funcionó.
puede usar el decorador @ViewChild() para obtener la referencia de modal en el componente y luego usarlo con jQuery para llamar al método .modal() para abrir el modelo desde dentro de la función.
declare cualquier variable local en su plantilla, por ejemplo, #myModal .
<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> úselo en su componente con el decorador @ViewChild() .
import { ViewChild } from '@angular/core'; import { ElementRef } from '@angular/core'; @Component({ ... }) export class YourComponent { @ViewChild('myModal') myModal:ElementRef; yourFunction(){ //open modal using jQuery jQuery(this.myModal.nativeElement).modal('show'); } }puede encontrar pasos para incluir jQuery en su proyecto aquí.
En caso de que el método .modal() le dé un error diciendo que .modal() no es una función, simplemente declare una variable jQuery en su archivo de componente de la siguiente manera.
declare var jQuery:any; @Component({ ... }) export class YourComponent{ ... }3 pasos para alternar (mostrar u ocultar) el modo de arranque:
Agregue ViewChild para acceder al código modal como se muestra a continuación:
Sugerencia: observe el #modal en el código en la primera línea:
<div class="modal fade" #modal> <div class="modal-dialog"> <div class="modal-content"> <form> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <header class="font-12 bold">Modal Header</header> </div> <div class="modal-body"> Your Content ... </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> </div> </form> </div> </div> </div>Agregar botón para mostrar modal en su html:
Sugerencia: Aviso al (clic)="showModal()" :
<button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button>Dentro de su componente, ponga estos códigos:
Sugerencia: Aviso para mostrar la función Modal y acceder al signo jquery dentro del componente:
// jQuery Sign $ declare let $: any; @Component({ ... }) export class YourComponent { @ViewChild('modal') modal:ElementRef; showModal(){ // Show modal with jquery $(this.modal.nativeElement).modal('show'); } }Sugeriría usar una biblioteca dedicada que proporcione una integración perfecta de Bootstrap 4 para Angular 2+. ng-bootstrap tiene una excelente implementación modal donde abrir un modal con contenido de un componente se reduce a:
@Component({ selector: 'ngbd-modal-component', templateUrl: './modal-component.html' }) export class NgbdModalComponent { constructor(private modalService: NgbModal) {} open() { const modalRef = this.modalService.open(MyContent); } }Puede leer la documentación completa aquí: https://ng-bootstrap.github.io/#/components/modal y ver un ejemplo en vivo con este plunk: http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview