如何在模板中输入检查 Angular 指令输入赋值类型？

Question

我正在使用 Angular 9 并具有以下 Angular 指令：

export type MyDirectiveValue = "foo"|"bar"; 
@Directive({
    selector: '[myDirective]'
})
export class MyDirective implements OnInit {
    @Input("myDirective") value: MyDirectiveValue;
    
    ngOnInit() {
        console.log(this.value);
    }
}

当我在我的模板中使用它时：

<div *myDirective="'invalid-value'">Hello</div>

我原以为 Ivy 会检测到 invalid-value 不可分配给类型 MyDirectiveValue 但事实并非如此，我可以自由分配任何值而不会出现任何模板编译失败。

有什么想法吗？

Answer 1

请查看文档：https://angular.io/guide/template-typecheck

特别是这部分：

Strict mode

Strict mode is a superset of full mode, and is accessed by setting the strictTemplates flag to true. This flag supersedes the fullTemplateTypeCheck flag. In strict mode, Angular version 9 adds checks that go beyond the version 8 type-checker. Note that strict mode is only available if using Ivy.

如何在模板中输入检查 Angular 指令输入赋值类型？

How to type check Angular Directive input assignment types in templates?

directive

typechecking

typescript

angular