Búsqueda de sitios web

typescript - En Angular ng-bootstrap modal con plantilla, los botones de cerrar y descartar no funcionan

Soy nuevo en Angular y estoy aprendiendo construyendo.

Tengo la necesidad de abrir un modal de manera programática con contenido HTML variable.

He referido el primer ejemplo de Stackblitz mostrado en este problema y creado un ModalComponent (con un selector llamado <app-modal>), para que pueda crear modales en cualquier parte de mi aplicación.

Ahora, uso este componente con contenido HTML variable en un <ng-template> en mi página.

El modal se abre bien al hacer clic en el botón de la página principal, pero los botones de cerrar y descartar en el modal no funcionan.

He intentado hacer un ejemplo mínimo aquí: https://stackblitz.com/edit/angular-j1u4fo

Cualquier ayuda será apreciada. Gracias.

Respuesta #1

Prueba esto

He creado la configuración global de modales con let-c="close" y let-d="dismiss"

app.component.html

<div class="container-fluid">
<p>Welcome to {{ name }}</p>
<button type="button" (click)="openModal()">Click to open Modal</button>

<!-- Example 1: Passing TemplateRef as custom component -->
  <ng-template #modal1 let-c="close" let-d="dismiss">
    <app-modal [title]="'Title'" [c]="c" [d]="d">
      <img src="https://angular.io/assets/images/logos/angular/angular.png" height="100px" width="100px">
    </app-modal>
  </ng-template>
</div>

modal.component.html

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <ng-content></ng-content>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Cancel</button>
</div>

modal.component.ts

import { Component, Input, OnInit } from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  @Input() title = `Information`;
  @Input() c;
  @Input() d;

  constructor(
    public activeModal: NgbActiveModal
  ) {}

  ngOnInit() {
  }

}

Respuesta #2

Reemplaza this.m1 con ModalComponent en tu llamada a openModal.

Según la documentación de la API, NgbActiveModal solo funciona cuando pasas un componente en lugar de la plantilla.

Si pasas un tipo de componente como contenido, entonces las instancias de esos componentes pueden ser inyectadas con una instancia de la clase NgbActiveModal. Luego puedes usar los métodos de NgbActiveModal para cerrar/descartar modales desde "dentro" de tu componente.

Artículos relacionados