时间戳

首页 > 解决方案 > Ng引导模式不打开

html - Ng引导模式不打开

问题描述

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

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

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

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

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

打字稿

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>

标签： htmlangulartwitter-bootstraptypescriptng-bootstrap

解决方案

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

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

推荐阅读