gpt4 book ai didi

angular - 具有父/子关系的 Angular 组件中的通用类型定义

转载 作者:行者123 更新时间:2023-12-05 07:05:38 25 4
gpt4 key购买 nike

我正在尝试创建这样的组件:

<dropdown formControlName="car">
<dropdown-option value="volvo"></dropdown-option>
<dropdown-option value="bmw"></dropdown-option>
<dropdown-option value="peugeot"></dropdown-option>
<!-- etc -->
</dropdown>

我对下拉组件的定义如下:

export component DropdownComponent<T> {
possibilities: Array<T>
}

我对下拉选项组件的定义如下:

export component DropdownOptionComponent<T> {
@Input() value: T
}

我的 DropdownOptionComponent 是否可以推断 DropdownComponent 的通用类型 T 并限制 DropdownOptionComponent 的可用选项> 满足通用 T 的任何内容?

编辑:为了进一步阐明我想要解决的问题,我希望我的模板足够智能,以便在我的模板中看到给定的父定义,它会检查它是否有效。

编辑 2:更好的例子:

// mycomponent.component.ts
export class MyComponent {
data: Array<{param1: number, param2: string}>;
}
<!-- mycomponent.component.html -->
<table [dataSource]="data">
<table-entry *myTemplateDirective="let entry">
<!-- do something with entry -->
</table-entry>
</table>

是否可以根据表格组件中data的输入获取entry类型。

编辑 3:代码示例中的拼写错误

最佳答案

即使您在将值从父组件传递到子组件时声明了您的子组件具有泛型类型,您在默认情况下也会获得在父组件本身中使用的确切类型。你不需要再明确地做。

如果您在使用 bool 值声明属性值时查看下面的示例。 Typescript 将能够以类似的方式告诉该属性与什么类型相关联,它也适用于您的用例

Example Type Casting

关于angular - 具有父/子关系的 Angular 组件中的通用类型定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62671260/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com