Question

角度ng-bootstrap模态打开不支持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

PS 。我还查看了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

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

1 个答案: