Угловое модальное открытие ng-bootstrap не поддерживает TemplateRef как пользовательский компонент, переданный из шаблона - PullRequest
Новая
       89

Угловое модальное открытие ng-bootstrap не поддерживает TemplateRef как пользовательский компонент, переданный из шаблона

0 голосов
/ 26 июня 2018

Angular 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>

Я ожидал использовать его следующим образом:

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].Вы добавили его в @ 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

Bootstrap: 4.1.1

PS Я также взглянул на https://valor -software.com / ngx-bootstrap / # / modals и https://material.angular.io/components/dialog/overview, но похоже, что они также не поддерживают необходимое поведение.

1 Ответ

0 голосов
/ 26 июня 2018

Оказывается, дьявол снова в деталях.

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

...