Angular 7 - 使用 ngTemplateOutlet 构建组件库时出错

Question

我刚刚升级到 Angular 7，我正在努力让我的组件库正确编译。

我有以下代码：

自动完成.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>

当我在我的测试项目中运行它时，一切正常。但是，当我尝试构建要发布的组件库时，出现以下错误：

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

好的，我从组件 html 中删除它并尝试以下操作：

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

这可以编译，但每当我尝试渲染任何内容时，都会出现以下运行时错误：

templateRef.createEmbeddedView is not a function

我在这里做错了什么？

Answer 1

看来您在 ContentChild 的正确类型上出错了：

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

并将模板带回：

*ngTemplateOutlet="listItemTemplateRef.template