时间戳

首页 > 解决方案 > TemplateRef 类型检查/声明类型

angular - TemplateRef 类型检查/声明类型

问题描述

假设我有一个显示数据列表的泛型组件：

interface DataProvider<T> {
  getData(): T[];
}

...
template: '<div *vsFor="let item in dataProvider.getData()">
    <ng-container *ngTemplateOutlet="rowTemplate; context:{item: item}">
    </ng-container>
</div>'
...
class AwesomeList<T> {
  @Input dataProvider: DataProvider<T>;
  @Input rowTemplate: TemplateRef<T>;
}

使用时出现一些问题：

<awesome-list [dataProvider]="provider" [rowTemplate]="template"></awesome-list>

<ng-template #template let-object="item">
{{object.name}} // Here, type of object is unclear (?)
</ng-template>

那么有什么方法可以在这里定义对象/项目类吗？

PS所有这些工作都很好，但我想以严格的类型、IDE中的自动完成等结束。

标签： angularangular-template

解决方案

根据角度文档，您可以通过将标志“strictTemplates”和“fullTemplateTypeCheck”设置为 true 来实现这一点（在此处查看更多信息：https ://angular.io/guide/template-typecheck ）

我在stackblitz上做了一个repro，遗憾的是我认为你没有看到stackblitz这样的错误，你可以在本地复制/粘贴它，看看它是否适合你（https://stackblitz.com/edit/angular-strict -template-example?file=src/app/app.component.html )

请注意，这仅与角度编译相关，我不确定 VS Code 是否会为您提供自动完成功能

编辑：坏消息我在本地尝试将标志设置为 true 但它不起作用（对我来说，文档令人困惑，因为它说“推断出正确类型的组件/指令，包括泛型。”）@amakhrov 引用了解释这一点的问题功能尚未准备好 https://github.com/angular/angular/issues/28731

推荐阅读