Question

我刚刚升级到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

我在这里做错了什么？

Answer 1

看起来您为ContentChild使用了正确的类型出了错：

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

并将模板带回到：

*ngTemplateOutlet="listItemTemplateRef.template

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

1 个答案: