模态没有正确显示角度 4答案

【问题标题】：Modal doesn't appear correctly angular 4模态没有正确显示角度 4
【发布时间】：2018-01-02 11:19:16
【问题描述】：

我正在使用 ng-bootstrap Here 尝试做一个模态示例，但是当我单击打开模态时它不会出现，尽管它存在于 DOM 中。

我的角核心版本：4.0.0，@ng-bootstrap/ng-bootstrap：1.0.0-alpha.29，bootstrap：3.3.7

test-modal.component.html

<div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>

test-modal.component.ts

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

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

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

@Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

app.component.ts 中的 open 函数与构造函数

 constructor(private modalService: NgbModal) {}
  open() {
    const modalRef = this.modalService.open(TestModalComponent);
  }

app.component.html 中的按钮

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

【问题讨论】：

请发布您正在使用的代码 sn-ps，或提供plunker example。你可以阅读更多关于how to ask a question here :)
@0mpurdy 我分享了相关代码，查看更新。
This question 可能会对您有所帮助 - 请注意，它提到：您是否忘记将引导 css 附加到您的应用程序？
@0mpurdy 感谢您的回复，我在样式部分的.angular-cli.json 文件中添加了引导 css
您在控制台中看到任何错误吗？

标签： javascript angular ng-bootstrap

【解决方案1】：

我认为问题可能出在您的引导程序版本 bootstrap :3.3.7，当我进入主页时，它说它适用于 Bootstrap 4（它在开始时也显示引导程序 4）。

并在 Angular 4 + Bootstrap 4 项目中进行测试，我得到了它的工作

在package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"bootstrap": "^4.0.0-alpha.6",

在我的模块中

imports: [
  NgbModule.forRoot(), ...
],
entryComponents: [ModalTemplateComponent],

在组件中：

modal: NgbModalRef;

constructor(private modalService: NgbModal) { }  

async open() {
  this.modal = this.modalService.open(ModalTemplateComponent);

  const result = await this.modal.result;

  console.log(result);
}

【讨论】：

完美就是这样：D