具有父/子关系的 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是否有可能推断出DropdownOptionComponent的泛型类型T并将DropdownComponent的可用选项限制为满足泛型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

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

如果您查看下面的示例，则在您使用 boolean 值声明属性值的那一刻。 Typescript 将能够判断该属性与什么类型相关联，以类似的方式它也适用于您的用例