从父组件调用的子组件内部的Angular 2 ng2引导模式

这很难解释。我有一个简单的ng2引导模式工作示例。我扩展了它，为我的主页添加了Boostrap 4 Jumbotron示例模板，现在ng2引导模式什么都不做。我可以看到子模式组件中的

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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; 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">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                I am a child modal, opened from parent component!
            </div>
        </div>
    </div>
</div>

//============================================================================
///src/app/app.module.ts
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/http'导入{HttpModule}；
从“ng2引导/modal”导入{ModalModule}；
从'@ng bootstrap/ng bootstrap'导入{NgbModule}；
从“./app.component”导入{AppComponent}；
从“./demo-modal-childcomponent”导入{DemoModalChildComponent}；
@NGD模块({
声明：[
AppComponent，DemoModalChildComponent
],
进口：[
浏览器模块，
FormsModule，
HttpModule，
NgbModule.forRoot（），
ModalModule.forRoot（）的
],
引导：[AppComponent]
})
导出类AppModule{}
// ============================================================================
///src/app/app.component.ts
从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
title='appworks！'；
}












搜寻
开放式子模式
你好，世界！
这是一个简单的营销或信息网站的模板。它包括一个称为jumbotron的大型标注
和三个支持内容。把它作为一个起点来创造更独特的东西


标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。Fusce dapibus、tellus ac cursus commodo、tortor mauris调味品
尼伯，我们的发酵剂只不过是一种发酵剂。这是一个很好的例子。多尼克赛德
奥迪奥酒后驾车。


标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。Fusce dapibus、tellus ac cursus commodo、tortor mauris调味品
尼伯，我们的发酵剂只不过是一种发酵剂。这是一个很好的例子。多尼克赛德
奥迪奥酒后驾车


标题
Donec sed odio dui。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。猫门前庭舌骨
尤伊斯莫德森佩尔。福斯·达皮布斯、特鲁斯·阿库鲁斯·康莫多、托托·莫里斯调味品尼布、尤特·马萨发酵剂
只是坐在阿梅特·里索斯



&抄袭；burnmarkGames 2017

// ============================================================================
///src/app/demo-modal-child.component.ts
从“@angular/core”导入{Component，ViewChild}；
从“ng2引导/modal”导入{MODALDIRECT}；
@组成部分({
选择器：“演示模式子对象”，
templateUrl:'./demo modal child.component.html'，
exportAs:“儿童”
})
导出类DemoModalChildComponent{
@ViewChild（'childModal'）公共childModal:ModalDirective；
public showChildModal（）：void{
log（'DemoModalChildComponent.showChildModal！'）；
this.childModal.show（）；
}
public hideChildModal（）：void{
this.childModal.hide（）；
}
}
请登录。。。
&时代；
我是一个子模态，从父组件打开！

您的通用子模式组件如下所示

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">&times;</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();
  }
}

从'@angular/core'导入{Component，Input，ViewChild}；
从“ng2引导/ng2引导”导入{ModalDirective}；
@组成部分({
选择器：“公共模态”，
模板：`
{{title}}
&时代；
取消
`,
})
导出类CommonModalComponent{
@ViewChild（'childModal'）公共childModal:ModalDirective；
@输入（）标题：字符串；
构造函数（）{
}
show（）{
this.childModal.show（）；
}
隐藏（）{
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) {
  }

}

从'@angular/core'导入{Component，ViewChild，NgModule，ViewContainerRef}
从“@angular/platform browser”导入{BrowserModule}；
从“ng2引导/ng2引导”导入{ModalDirective，ModalModule}；
从“/child.modal”导入{CommonModalComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
开放模态
嗨，你好
`,
})
导出类AppComponent{
@ViewChild（'childModal'）childModal:CommonModalComponent；
构造函数（私有viewContainerRef:Vi）