Question

我有一个非常简单的组件

@Component({
  selector: "generic-select",
  template: `
 <select [(ngModel)]="target">
  <option *ngIf="target" hidden selected>{{target}}</option>
  <option *ngFor="let c of choices">{{c}}</option>
 </select>
`
}) export class SelectorComponent<T> {

  @Input()
  private choices: T[];

  @Input()
  private target: T;
}

问题是，T并不总是像字符串或数字那样的原始对象，而是一个复杂的对象。所以，在这种情况下，我想传递一些东西（我真的不知道是什么），告诉我T的预览应该是什么样的。

我想要像男孩一样

<generic-select [choices]="choices" [target]="user.choice" [formatter]="(t:T) => t.name"></generic-select>

Answer 1

不完全是您所要求的，但这是该问题的潜在解决方案：

如果您使用的是TypeScript，则可以创建classes that extend other classes。如果您对显示值字段有一个约定，那么可以在公共基类上使用它，而不是使用泛型类型。

显然，对于原始类型，它们也需要用类包装。

如果要支持基元和自定义类型，另一种方法是在组件上有两个可选的输入属性，一个用于所有基元（如现在所有），另一个用于公共类类型。然后在模板中显示基于提供的输入的值。

如何为Angular2组件传递格式化选项？

1 个答案: