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

问题描述 投票:0回答:2

我将

@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?
angular
2个回答
4
投票

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

@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;
}

0
投票

在 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

© www.soinside.com 2019 - 2024. All rights reserved.