ビジネスオブジェクトを入力として受け取るコンポーネントがあります。このコンポーネントのテンプレートでは、ビジネスオブジェクトの一部のサブクラスにのみ存在するプロパティの値を確認することにより、条件付きで一部のコンテンツをレンダリングしたいと思います。
export class Thing { public foo: string; }
export class SubThing extends Thing { public bar: number; }
// ...
export class MyComponent {
@Input() thing: Thing;
}
<!-- template file -->
{{ thing.foo }}
<div *ngIf="thing?.bar > 10">Conditional content...</div>
コンパイラはテンプレートの型チェックについてそれほど厳密ではなかったため、これは以前は記述どおりに機能していました。最近、これはAOTコンパイラで壊れ始めました（正確にはいつかはわかりません）。厳密に言えば、thing?.barコンパイラthingが単なる、Thingであると判断した場合は無効であり、それがであるとは断言できませんSubThing。
のようなことを言いたいのです*ngIf="thing instanceof SubThing && thing?.bar > 10"がinstanceof、テンプレート自体では使用できません。thingコンパイラが文句を言うのをやめるように、テンプレートからタイプをチェックできる他の方法はありますか？（入力をとして指定することでビルドが再び機能するanyようになりましたが、もちろん、可能であれば型チェックを元に戻したいと思います。）
どうやらコンパイラはユーザー定義型ガードを尊重しているようです。コンポーネントでメソッドを定義する必要があります。
export class MyComponent {
// ...
/** @internal */ isSubThing(t: Thing): t is SubThing {
return t instanceof SubThing;
}
}
<!-- template file -->
{{ thing.foo }}
<div *ngIf="isSubThing(thing) && thing?.bar > 10">
Conditional content...
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加