Tengo un componente modal creado con ng-bootstrap como sigue (solo un cuerpo):
<template #content let-c="close" let-d="dismiss"> <div class="modal-body"> <p>Modal body</p> </div> </template>Y es componente angular 2
import { Component } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'my-hello-home-modal', templateUrl: './hellohome.modal.html' }) export class HelloHomeModalComponent { closeResult: string; constructor(private modal: NgbModal) {} open(content) { this.modal.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { console.log(reason); }); } }Realmente quiero poder llamar a este modal desde otro componente en mi sitio web. Solo quiero llamar desde mi homeComponent al método abierto.
Ver mi componente de inicio
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-home', templateUrl: './home.component.html' }) export class HomeComponent implements OnInit { constructor() { } ngOnInit() { console.log('Hello Home'); /** want call modal popin here from the init component method in order to test the modal. **/ } }Alguien me puede explicar como hacer eso? Venía de angular 1.x y era mucho más simple...
Así es como lo hago con Angular 5 y ng-bootstrap. Cree su componente modal de la siguiente manera:
import { Component, OnInit } from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'sm-create-asset-modal', templateUrl: './create-asset-modal.component.html', styleUrls: ['./create-asset-modal.component.css'] }) export class CreateAssetModalComponent implements OnInit { constructor(public activeModal: NgbActiveModal) { } ngOnInit() { } }y la plantilla será algo como:
<div class="modal-header"> <h4 class="modal-title">Create New </h4> <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button> </div>En el componente desde el que desea abrir el modal, agregue una variable de tipo NgbModal y llame a abrir de la siguiente manera:
export class MyComponent { constructor(private modal: NgbModal) {} onClick() { this.modal.open(CreateAssetModalComponent); } }En el NgModule donde se declara CreateAssetModalComponent, agregue el componente en la matriz entryComponents de la siguiente manera:
@NgModule({ imports: [...], declarations: [CreateAssetModalComponent], entryComponents: [CreateAssetModalComponent] })Suponiendo que tiene otros módulos como NgbModule importados, esto debería funcionar.
No estoy seguro de entender completamente lo que está tratando de hacer, pero en esencia es muy simple: para abrir una ventana modal con un contenido específico, simplemente llame al método open en el servicio NgbModal . La implementación más simple posible sería una sola línea ( this.modalService.open('Hi tehre!'); ):
@Component({ selector: 'my-home', templateUrl: 'src/modal-basic.html' }) export class HomeComponent implements OnInit { constructor(private modalService: NgbModal) {} ngOnInit(content) { this.modalService.open('Hi tehre!'); } }Véalo en vivo en plunker: http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview
¡Es exactamente lo mismo que en angular-ui/bootstrap para AngularJS 1.x! Los principios son exactamente los mismos, nada ha cambiado.
Lo que podría estar dándote dolores de cabeza es cómo especificar el contenido del modal. En el ejemplo anterior, estoy usando una cadena, pero en la gran mayoría de los casos desea usar HTML con enlaces, directivas, etc. Pero Angular es diferente, ya que simplemente no puede pasar una cadena HTML si no desea enviar el compilador a producción (y realmente no quieres hacer esto...).
Entonces, su próxima mejor opción es usar otro componente como contenido, aquí hay un ejemplo mínimo: http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview
Nota : debido a un error en el propio Angular, actualmente necesita ajustar la llamada al método open() con setTimeout . Referencia de errores: https://github.com/angular/angular/issues/15634
Agregue HelloHomeModalComponent a los parámetros de su constructor y llame a la función open desde HomeComponent así:
import { Component, OnInit } from '@angular/core'; import { HelloHomeModalComponent } from "hello-home-modal.component"; @Component({ selector: 'my-home', templateUrl: './home.component.html' }) export class HomeComponent implements OnInit { constructor(private modal: HelloHomeModalComponent) {} ngOnInit() { this.modal.open(); } } No necesita pasar un parámetro de content al open() de su componente si usa @ViewRef() para obtener la referencia de plantilla adecuada del componente modal.