Question

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

在实践中，我必须实现一个测试按钮，该按钮可以打开带有标题和主体的模态，此外还必须有一个关闭按钮和一个脱离按钮。 HTML的这一部分工作正常，我已经对其进行了测试，问题出在TypeScript的一部分。

在open函数中，有一个命令const modalRef = this.modalService.open(NgbdModalContent);不能正常工作，事实是该命令有效，实际上，如果我代替NgbdModalContent放置了一个字符串，那么它只是NgbdModalContent在理论上应该采用HTML。

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

PS。是这个世界的新手，尤其是关于Angular2和TypeScript的东西，因此欢迎批评和评论（我知道我犯了一个大错误，并且可能对您来说是个小错误）。非常感谢

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>

Answer 1

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

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

NG引导程序模式无法打开

1 个答案: