很难解释这一点。我有一个简单的工作ng2-bootstrap模式示例工作。我将它扩展为包含我的主页的Boostrap 4 Jumbotron示例模板，现在ng2-bootstrap模式什么都不做。我可以看到点击按钮时调用子模态组件中的this.childModal.show()，但没有任何反应。 Chrome控制台没有错误，也没有模态显示。我不知道下一步该做什么： - /
// ============================================================================
// /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!';
}
<!-- ========================================================================== -->
<!-- /src/app/app.component.html -->
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="showLoginModal()">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/members">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/game">Game</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<demo-modal-child #c="child"></demo-modal-child>
<button type="button" class="btn btn-primary" (click)="c.showChildModal()">Open child modal</button>
<h1 class="display-3">Hello, world!</h1>
<p>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.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<!-- /jumbotron -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>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.
</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>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. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>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.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© burnmarkGames 2017</p>
</footer>
</div>
<!-- /container -->
// ============================================================================
// /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();
}
}
<!-- ========================================================================== -->
<!-- /src/app/demo-modal-child.component.html -->
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Please login...</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
I am a child modal, opened from parent component!
</div>
</div>
</div>
</div>
答案 0 :(得分：6)
您的普通子模态组件将如下所示
import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'common-modal',
template: `
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content select=".modal-body"> </ng-content>
</div>
<div class="modal-footer">
<div class="pull-left">
<button class="btn btn-default" (click)="hide()"> Cancel </button>
</div>
</div>
</div>
</div>
</div>
`,
})
export class CommonModalComponent {
@ViewChild('childModal') public childModal:ModalDirective;
@Input() title:string;
constructor() {
}
show(){
this.childModal.show();
}
hide(){
this.childModal.hide();
}
}
在父组件中使用子组件将如下所示
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: `
<button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>
<common-modal #childModal [title]="'common modal'">
<div class="modal-body">
Hi heloo </div>
</common-modal>
`,
})
export class AppComponent {
@ViewChild('childModal') childModal :CommonModalComponent;
constructor(private viewContainerRef: ViewContainerRef) {
}
}
使用上面的代码，你可以有一个单独的常用模式对话框，可以重复使用，这样你的标题和＆amp;页脚保持不变，您可以使用内容 - 投影来更改模态对话框的主体。
<强> LIVE DEMO