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

Question

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

我有以下代码：

自动-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>

在我的自动 complete.component.ts 中，我有这一行：

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

和一个自动完成列表项目-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

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

Angular 7 - Error when building component library with ngTemplateOutlet

angular2-template

angular

angular7