获取输入类型并将其转换为 Angular

Question

我将

@Input() element

变量传递给

app-child

组件

<app-child [element]="element"></app-child>

element

是一个对象。它可以有多种类型，例如

Blue

、

Red

或

Green

在

ChildComponent.ts

内部，如何确定

element

的类型并将其转换为正确的类型？

instanceof

不能与

any

类型的变量一起使用。

`ChildComponent.ts`

@Input() element: any; // is it of type Blue, Red or Green?

Answer 1

首先，如果只允许使用红色、蓝色和绿色值，则这样声明元素可能会更清楚：

@Input() element: Red | Blue | Green;

如何确定类型取决于红色、蓝色或绿色是什么类型。如果它们是类，您可以使用可靠的

instanceof

运算符：

if (this.element instanceof Red) {
    const red: Red = this.element; // no cast necessary in if-block
}

如果它们是接口，那么这是行不通的，因为打字稿接口无法在转译为 JavaScript 后继续存在。不过，您可以测试会员：

if ((<Red> this.element).reddishMember) {
    const red = <Red> this.element;
}

Answer 2

在 Angular 16^ 中，您可以使用 @Input() 的转换选项：

class ParentComponent {
   data: Blue | Red | Green;
}

** parent template **
   <app-child-component [data]="data" />
**

class ChildComponent {
   // There is a simple cast function but you can do whatever you want
   @Input({ transform: (v: Blue | Red | Green) => v as Green }) data!: Green;
}

文档： https://angular.dev/guide/components/inputs