主页 / coding / 问题 / 78322800
Accepted
Konrad Viltersten
Asked: 2024-04-14 13:21:30 +0800 CST

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

  • 772

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

@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);
  }
}

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

angular

1 个回答

  1. Best Answer

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

    export const LookUp = {
  PROJECTS:'Projects',
  USERS:'Users',
  ENTITY:'Entity'
  } as const;

export type LookUpKeys = keyof typeof LookUp;
export type LookUp = typeof LookUp[LookUpKeys];

export type DynamicLookUp = {
  'Projects':ProjectService;
  'Users':UserService,
  'Entity':EntityService,
}


export const PROJECTS_TOKEN = new InjectionToken<ProjectService>('Projects');
export const USERS_TOKEN = new InjectionToken<UserService>('Users');
export const ENTITY_TOKEN = new InjectionToken<EntityService>('Entity');


export const LookUpMapToken:{[key in LookUp]:DynamicLookUp[key]} = {
  'Projects':PROJECTS_TOKEN,
  'Users':USERS_TOKEN,
  'Entity':ENTITY_TOKEN
}

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

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

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

  onClick(input: TOutput) {
    ...
    this.selection.emit(input);
  }
resolveService(query:string|number){
  const token = LookUpMapToken[this.lookUpType];

  if(!token){
    throw new Error('Invalid lookup type');
  }

  const service = this.injector.get<DynamicLookUp[typeof this.lookUpType]>(token);

  if(service instanceof ProjectService){
    //call function here
  }
  if(service instanceof UsersService){
    //call function here
  }
}

    确保strictTemplate在true您的tsconfig.json.

    • 1

相关问题