angular - ng-template - 类型变量
问题描述
父组件如何识别let-content
来自哪个 类型ngTemplateOutletContext
?现在{{content.type}}
工作正常,但 IDE 说:
未解析的变量类型
我怎样才能输入它Video
?
父组件.ts:
export interface Video {
id: number;
duration: number;
type: string;
}
public videos: Video = [{id: 1, duration: 30, type: 'documentary'}];
父组件.html:
<ul>
<li *ngFor="let video of videos">
<tile [bodyTemplate]="tileTemplate" [content]="video"></app-card>
</li>
</ul>
<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{content.type}}</h5>
</ng-template>
tile.component.ts:
@Component({
selector: 'tile',
templateUrl: './tile.component.html',
styleUrls: ['./tile.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
@Input() tileTemplate: TemplateRef<any>;
@Input() content: Video;
}
tile.component.html:
<div
...
<ng-container
[ngTemplateOutlet]="tileTemplate"
[ngTemplateOutletContext]="{ $implicit: content }">
</ng-container>
...
</div>
解决方案
let-*
变量没有类型推断。上下文是 Angular 微语法解析器的let-
一部分,IDE 无法推断类型,因为没有明确的来源。
https://gist.github.com/mhevery/d3530294cff2e4a1b3fe15ff75d08855
您可以尝试使用使 IDE 警告静音$any()
https://angular.io/guide/template-syntax#the-any-type-cast-function
<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{$any(content).type}}</h5>
</ng-template>
您可以使用函数强制类型推断
<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{toVideo(content).type}}</h5>
</ng-template>
public toVideo(value: any): Video { return value as Video; }
推荐阅读
- angular - 为什么我的标题在 Angular 7 中没有响应?
- javascript - 反应路由器页面无法刷新
- c# - PayPal.Api 无法识别 App.config 文件
- vb.net - 如何上传 Excel 文件,然后在 vb.net (ADODB) 中打印该 Excel 文件?
- arrays - 列出在字符串(函数或 VBA)中找到的值
- coq - CoqIde:展示简单的策略在做什么
- javascript - 非 UTC 服务器上所有带有时间戳的 mysql 导出文件中是否存在错误?
- javascript - 分解使用一些 ES5 / 高级 JavaScript 编写方法的代码段?
- linux - 如何使用 linux shell 命令计算文本文件中某些模式的精确匹配?
- ios - LibGDX 使用 RoboVM 模拟 iOS 崩溃并出现架构不匹配错误