Angular - 在 @if 中使用模板变量

Question

仅当我在 Angular 中将“this.signal().object?.nestedObject”分配给类中的变量时才有效。

类型缩小不起作用

@if(isTypeA(this.signal().object?.nestedObject)) {
    {{ this.signal().object?.nestedObject.TypeAUniqueProperty }} 
} @else if (isTypeB(this.signal().object?.nestedObject)){
    {{ this.signal().object?.nestedObject.TypeBUniqueProperty }} 
}

类型缩小工程

   @if(isTypeA(variable)) {
        {{ variable.TypeAUniqueProperty }} 
    } @else if (isTypeB(variable)){
        {{ varble.TypeBUniqueProperty }} 
    }

是否可以将 this.signal().object?.nestedObject 分配给 Angular 模板变量。以前用旧的 ngIf 可以吗？这消除了在类中设置变量的需要

更新

我只能通过使用外部 @if 来做到这一点。

@if(this.signal().object?.nestedObject; as templateVariable) {
   @if(isTypeA(templateVariable)) {
      {{ templateVariable.TypeAUniqueProperty }} 
   } @else if (isTypeB(templateVariable)){
    {{ templateVariablet.TypeBUniqueProperty }} 
  }
}

Answer 1

比在

@if

/

ngIf

中定义模板变量更有效的方法 是使用 Angular 18 中引入的新

@let

语法:

@let variable = signal().object?.nestedObject;

@if (isTypeA(variable)) {
  {{ variable.TypeAUniqueProperty }}
} @else if (isTypeB(variable)) {
  {{ variable.TypeBUniqueProperty }}
}

参见官方文档。