如何將 Typescript 類型“傳遞”到 Angular 組件 @Input 裝飾器

Question

我對 Angular 有點陌生，並且仍在努力了解 Typescript 更復雜的方面，所以如果這個問題措辭不當和/或答案很明顯，請原諒我。

我有一個簡單的 Angular 組件來顯示下拉菜單。 我最初的傳球將其作為輸入/輸出：

 @Input() options: OptionType[] = [];
 @Input() selectedOption: OptionType = { name: '', value: '' };

 @Output() onChangeEvent = new EventEmitter<OptionType>();

...其中OptionType是：

type OptionType = {
  name: string;
  value: string;
}

問題是該組件的調用者通常對name和value的可能值有限。 例如，我可能有一個選項集：

[
{name: 'No', value: 'no'},
{name: 'Yes', value: 'yes'}
]

在父級聲明的類型中，我將可能的類型限制為您在上面看到的類型，這會導致例如'no' | 'yes'之間的沖突。 'no' | 'yes'和string 。

我想做的就是說這個組件的主要OptionType應該從調用者那里繼承。 我知道這種事情通常是用 Typescript generics 完成的，但我不知道如何在這種情況下做我想做的事情，或者即使這樣的事情是可能的/聰明的。

提前感謝您的任何指導！

Answer 1

這是我更新的組件 TS 文件。 沒什么大不了的，所以我認為發布整個內容並沒有什么壞處。

selectedOption行對我來說似乎有點奇怪，但我想我明白了。 我的第一個傾向是將其設置為T ，但不能保證我在下面的代碼中設置的默認值將是T的成員，因此它必須是OptionType是有道理的。

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

type OptionType = {
  name: string;
  value: string;
};

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss'],
})
export class DropdownComponent<T extends OptionType> implements OnInit {
  @Input() options: T[] = [];
  @Input() selectedOption: OptionType = { name: '', value: '' };

  @Output()
  onChangeEvent = new EventEmitter<T>();

  constructor() {}

  ngOnInit(): void {}

  onChange(option: any) {
    this.onChangeEvent.emit(option);
  }
}