Угловой 7 - Ошибка при построении библиотеки компонентов с помощью ngTemplateOutlet - PullRequest
Новая
       22

Угловой 7 - Ошибка при построении библиотеки компонентов с помощью ngTemplateOutlet

0 голосов
/ 15 ноября 2018

Я только что обновился до Angular 7 и изо всех сил пытаюсь заставить мою библиотеку компонентов правильно скомпилироваться.

У меня есть следующий код:

auto-complete.component.html: 

<li *ngFor="let item of items; let index = index;">
    <ng-container *ngTemplateOutlet="listItemTemplateRef.template, context: { $implicit: item, index: index }"></ng-container>
</li>

В моем auto-complete.component.ts у меня есть эта строка: 

@ContentChild(AutoCompleteListItemTemplateDirective) listItemTemplateRef: TemplateRef<AutoCompleteListItemTemplateDirective>;

и файл auto-complete-list-item-template.directive.ts: 

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({
    selector: '[autoCompleteListItemTemplate]'
})
export class AutoCompleteListItemTemplateDirective {
    @Input() type: string;
    @Input('autoCompleteListItemTemplate') name: string;

    constructor(public template: TemplateRef<any>) { }
}

И, наконец, страница, которая потребляет мой компонент: 

<ng-template let-result [autoCompleteListItemTemplate]>
    <span style='font-size: 16px; font-weight: bold;'>{{result.company}}</span><br />
    <span>{{result.name.first}} {{result.name.last}}</span><br />
</ng-template>

Когда я запускаю это в своем тестовом проекте, все работает нормально.Однако, когда я пытаюсь и ng собираю свою библиотеку компонентов для выпуска, я получаю следующую ошибку: 

Property 'template' does not exist on type 'TemplateRef<AutoCompleteListItemTemplateDirective>'.

Хорошо, я удаляю это из html компонента и пробую это: 

*ngTemplateOutlet="listItemTemplateRef, context: { $implicit: item, index: index }"

Это компилируется, но всякий раз, когда я пытаюсь что-то отобразить, я получаю эту ошибку времени выполнения: 

templateRef.createEmbeddedView is not a function

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 15 ноября 2018

Похоже, вы ошиблись с правильным типом для ContentChild: 

@ContentChild(...) listItemTemplateRef: TemplateRef<AutoCompleteListItemTemplateDirective>
                                                    ||
                                                    \/
@ContentChild(...) listItemTemplateRef: AutoCompleteListItemTemplateDirective

И верните шаблон: 

*ngTemplateOutlet="listItemTemplateRef.template
...