Angular ng-bootstrap Modal Open 不支持 TemplateRef 作为从模板传递的自定义组件

Question

Angular ng-bootstrap Modal open 不支持 TemplateRef 作为从模板传递的自定义组件。

最初我希望使用 Modal 类似的东西：

this.modalService.open(ModalWindowComponent, {
    body: EmployeeFormComponent,
    title: 'Employee',
    data: {
        age: 28
    }
});

使用ModalWindowComponent 模板如下：

<div class="modal-dialog">
    <div class="modal-header">
        <h4 class="modal-title">{{modal.title}}</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.close()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ng-template [ngTemplateOutlet]="modal.body">
            <!-- example: <app-employee-form></app-employee-form> -->
        </ng-template>
    </div>
</div>

但后来我意识到这是不可能的，或者需要超级复杂的逻辑和动态组件创建。所以，我决定使用推荐的模板驱动方法，在组件模板中有模态模板。但是因为我需要自定义正文，所以我用这个模板创建了ModalWindowComponent：

<ng-template>
    <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
        <button type="button" class="close" aria-label="Close" (click)="ref.dismiss()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ng-content></ng-content>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="ref.close()">Cancel</button>
    </div>
</ng-template>

我期待以这种方式使用它：

模板

<button type="button" class="btn btn-primary" (click)="open(modal)">Open</button>
<app-modal-window [ref]="modal" [title]="'Title'" #modal>
    Body
</app-modal-window>

组件

open(modal: NgbModalRef): void {
    this.modalService.open(modal).result.then((result: any) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason: any) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

但是我看到了这个错误：没有为 [object Object] 找到组件工厂。您是否将其添加到 @NgModule.entryComponents 中？ 我尝试通过将 ModalWindowComponent 添加到相关模块的 entryComponents 来修复它，但它没有帮助。

但是，这是可行的：

<button type="button" class="btn btn-primary" (click)="open(modal)">Open</button>
<ng-template #modal let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Title</h4>
        <button type="button" class="close" aria-label="Close" (click)="d()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        Body
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c()">Cancel</button>
    </div>
</ng-template>

所以，问题是我做错了什么？也许有更好的方法来实现所需的行为？我知道 Modal 不支持类驱动的自定义正文组件，但似乎我无法让模板驱动也能正常工作。

演示： https://angular-v6amvy.stackblitz.io

软件包版本：

角度：6.0.0

ng-bootstrap: 2.1.2

引导程序：4.1.1

P.S.我还查看了https://valor-software.com/ngx-bootstrap/#/modals 和https://material.angular.io/components/dialog/overview，但似乎它们也不支持所需的行为。

Answer 1

事实证明，魔鬼又在细节中了。

ModalWindowComponent 应该是这样的：

组件

export class ModalWindowComponent {  
    @Input() title: string;
    @Input() close;
    @Input() dismiss;
}

模板

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <ng-content></ng-content>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
</div>

用法应该是这样的：

<button type="button" class="btn btn-primary" (click)="open(modal)">Open</button>
<ng-template #modal let-c="close" let-d="dismiss">
    <app-modal-window [title]="'Title'" [close]="c" [dismiss]="d">
        Body
    </app-modal-window>
</ng-template>

演示： https://angular-v6amvy-pttrng.stackblitz.io