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

Question

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

<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:代码示例中的拼写错误

Answer 1

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

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