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

Question

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

最初我希望使用这样的模态：

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 不支持 class 驱动的自定义主体组件，但似乎我也无法让模板驱动工作。

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

软件包版本：

Angular: 6.0.0

ng-bootstrap: 2.1.2

Bootstrap: 4.1.1

P.S. 我也看过 https://valor-software.com/ngx-bootstrap/#/modals and 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

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

Angular ng-bootstrap Modal Open Doesn't Support TemplateRef as Custom Component Passed from Template

modal-dialog

ng-bootstrap

angular