使 Angular 组件在类型输入/输出方面变得通用

Question

我有一个查找组件按预期工作。它专门用于获取和过滤用户列表，这些用户在选择后将被设置为成员。它可以配置为设置标题、占位符等，以及我传递的用于呈现每一行候选的模板。注意。查找本身负责获取替代列表 - 来自父级的输入仅包含查询：传递给服务的部分名称。

@Component({ selector: 'app-lookup', ... })
export class LookupComponent {
  constructor(private service: MembershipService) { }

  @ViewChild("lookup") lookup: ElementRef;
  @ContentChild(TemplateRef) content: TemplateRef<unknown>;
  @Input() data = {} as LookupVm;
  @Output() selection = new EventEmitter<User>();
  ...

  onKeyUp(event: KeyboardEvent) {
    const query = (event.target as HTMLInputElement).value; ...
    this.service.getUsers(query).subscribe( ... );
  }

  onClick(input: User) {
    ...
    this.selection.emit(input);
  }
}

现在，我要为其他类型创建查找：项目、现有成员、活动等。显然，一种方法是为每个源实现专用的查找组件。不过，我想让它变得通用，因为大多数行为是相同的：只有源和输出不同。

Answer 1

为了将您的组件变成通用组件，您可以执行以下操作：

@Component({ selector: 'app-lookup', ... })
export class LookupComponent<TInput extend LookupVm = any,TOutput = any> {
  constructor(private service: MembershipService) { }

  @ViewChild("lookup") lookup: ElementRef;
  @ContentChild(TemplateRef) content: TemplateRef<unknown>;
  @Input() data:TInput;
  @Output() selection = new EventEmitter<TOutput>();
  ...

  onKeyUp(event: KeyboardEvent) {
    const query = (event.target as HTMLInputElement).value; ...
    this.service.getUsers(query).subscribe( ... );
  }

  onClick(input: TOutput) {
    ...
    this.selection.emit(input);
  }
}

确保将

strictTemplate

中的

true

设置为

tsconfig.json

。