Angular 2 ng2-bootstrap modal all’interno del componente figlio chiamato dal componente principale

Difficile da spiegare. Ho avuto un semplice esempio di modal ng2-bootstrap funzionante. L’ho espanso per includere il modello di esempio di Jombotron di Boostrap 4 per la mia home page, ora il modal bootstrap ng2 non fa nulla. Riesco a vedere che this.childModal.show() nel componente modale figlio viene chiamato al clic del pulsante, ma non succede niente. Nessun errore nella console di Chrome e nessun programma modale. Non ho idea di cosa fare dopo: – /

 // ============================================================================ // /src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { ModalModule } from 'ng2-bootstrap/modal'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from './app.component'; import { DemoModalChildComponent } from './demo-modal-child.component'; @NgModule({ declarations: [ AppComponent, DemoModalChildComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), ModalModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule { } // ============================================================================ // /src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; }     

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »


© burnmarkGames 2017

// ============================================================================ // /src/app/demo-modal-child.component.ts import { Component, ViewChild } from '@angular/core'; import { ModalDirective } from 'ng2-bootstrap/modal'; @Component({ selector: 'demo-modal-child', templateUrl: './demo-modal-child.component.html', exportAs: 'child' }) export class DemoModalChildComponent { @ViewChild('childModal') public childModal: ModalDirective; public showChildModal(): void { console.log('DemoModalChildComponent.showChildModal fired!'); this.childModal.show(); } public hideChildModal(): void { this.childModal.hide(); } }

Il tuo componente modale bambino comune sarà il seguente

 import {Component,Input, ViewChild} from '@angular/core'; import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'; @Component({ selector: 'common-modal', template: `  `, }) export class CommonModalComponent { @ViewChild('childModal') public childModal:ModalDirective; @Input() title:string; constructor() { } show(){ this.childModal.show(); } hide(){ this.childModal.hide(); } } 

Usando il componente figlio nel tuo componente genitore apparirà come di seguito

 import {Component, ViewChild, NgModule,ViewContainerRef} from '@angular/core' import { BrowserModule } from '@angular/platform-browser'; import { ModalDirective,ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; import {CommonModalComponent} from './child.modal'; @Component({ selector: 'my-app', template: `     `, }) export class AppComponent { @ViewChild('childModal') childModal :CommonModalComponent; constructor(private viewContainerRef: ViewContainerRef) { } } 

Usando il codice sopra puoi avere una finestra di dialogo modale comune separata che può essere riutilizzata, in modo che l’intestazione e il piè di pagina rimangano gli stessi ed è ansible utilizzare Content-Projection per utilizzare il corpo della finestra di dialogo modale.

DIMOSTRAZIONE DAL VIVO