Ng引导模式不打开答案

【问题标题】：Ng bootstrap modal don't openNg引导模式不打开
【发布时间】：2018-12-20 10:20:57
【问题描述】：

我从今天早上就遇到了这个问题，我无法解决它，我尝试了很多东西，但我无法打开它。

在实践中，我必须实现一个测试按钮，该按钮打开一个带有标题和正文的模式，此外还必须有一个关闭按钮和一个解除按钮。 HTML 的这部分有效，我测试了它，问题出在TypeScript 的部分。

在打开的函数中有一个不能正常工作的命令const modalRef = this.modalService.open(NgbdModalContent);，事实是这个命令工作，事实上如果不是NgbdModalContent我把一个字符串工作，所以它只是NgbdModalContent理论上应该采用 HTML。

如果您知道如何执行此操作将非常高兴，下面我将相关文件留给您。

附言。对这个世界来说是新的，尤其是关于Angular2 和TypeScript，所以欢迎批评和cmets（我知道我犯了一个大错误，可能是一个微不足道的错误（对你来说））。非常感谢

打字稿

import { Component, Input } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'post-ngb-modal-demo',
  templateUrl: './modal-demo.component.html',

})
export class NgbModalDemoComponent{
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
  }
}


export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

HTML

<ng-template #content let-c="close" let-d="dismiss">
  <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, world!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
  </div>
</ng-template>

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

【问题讨论】：

标签： html angular twitter-bootstrap typescript ng-bootstrap

【解决方案1】：

我认为您需要在 app.module.ts 中的 @NgModule 内的 entryComponents 中添加动态创建的组件。

@NgModule({
    imports: [
        ....
        ...
    ],
    declarations: [
        NgbdModalContent,
        ...
    ],
    entryComponents: [NgbdModalContent],
    providers: [
        ....
    ]
})

【讨论】：