Início / coding / Perguntas / 78322800
Accepted
Konrad Viltersten
Asked: 2024-04-14 13:21:30 +0800 CST

Tornando o componente Angular genérico em relação ao tipo de entrada/saída

  • 772

Eu tenho um componente de pesquisa funcionando como deveria. É dedicado a buscar e filtrar uma lista de usuários que, após seleção, serão definidos como membros. É configurável quanto à configuração do cabeçalho, espaço reservado, etc., bem como um modelo que estou passando para renderizar cada linha dos candidatos. Nota. É o próprio lookup o responsável por obter a lista de alternativas - a entrada do pai consiste apenas na consulta: um nome parcial passado ao serviço.

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

Agora, estou prestes a criar uma pesquisa para outros tipos: projetos, membros existentes, atividades etc. Obviamente, uma maneira de fazer isso é implementar um componente de pesquisa dedicado para cada fonte. Eu gostaria de torná-lo genérico, já que a maior parte do comportamento é o mesmo: apenas a fonte e a saída são diferentes.

angular

1 respostas

  1. Best Answer

    Para transformar seu componente em genérico você pode fazer o seguinte:

    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
  }
}

    Certifique-se de definir strictTemplateem trueseu arquivo tsconfig.json.

    • 1

relate perguntas