Angular泛型组件如何在父模板中指定泛型T的实际类型？

问题描述 #

我有一个表格组件，它接收任意数据的数组。组件会调用服务中的一个函数，该函数需要通过泛型确定数据类型（用于数据映射）。但我不知道如何在组件/Input中使用泛型，请问该怎么实现？另外，在父组件模板中使用这个组件时，我希望能指定T的实际类型，有什么解决办法？

代码示例 #

@Component({
  selector: 'inm-mapped-table',
  template: `
  <pre>{{ $rows | async }} </pre>
  `,
})
export class InmMappedTableComponent<T extends Record<string, any>> implements OnInit {
  @Input() $data: Observable<T[]>;
  @Input() config: MappingConfig<T>[] = [];

  $rows: Observable<Row[]>;

  constructor(private readonly mappingService: InmTableMappingService) {}

  ngOnInit(): void {
    this.$rows = this.$data.pipe( 
        switchMap( data => this.mappingService.getRows<T>(data, this.config) )
    )
  }
}

解决方案 #

Angular模板本身不支持直接指定组件泛型类型，可通过以下方式实现类型约束与指定：

1. 依赖TypeScript类型推断（推荐） #

在父组件的TypeScript代码中明确输入属性的类型，子组件的泛型T会自动匹配：

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { InmMappedTableComponent } from './mapped-table.component';

// 定义实际业务数据类型
interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-parent',
  template: `
    <inm-mapped-table 
      [$data]="userData$" 
      [config]="userMappingConfig"
    ></inm-mapped-table>
  `,
})
export class ParentComponent {
  // 明确$data的类型为Observable<User[]>
  userData$: Observable<User[]> = of([
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' }
  ]);

  // MappingConfig会自动推断为User类型，确保与$data类型一致
  userMappingConfig = [
    { key: 'id', label: '用户ID' },
    { key: 'name', label: '用户名' },
    { key: 'email', label: '邮箱' }
  ];
}

2. 创建类型化子类组件 #

如果需要在多处复用同一类型的表格，可创建固定泛型类型的子类，简化模板使用：

import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { InmMappedTableComponent } from './mapped-table.component';
import { User } from './user.model';

@Component({
  selector: 'inm-user-table',
  template: `<inm-mapped-table [$data]="$data" [config]="config"></inm-mapped-table>`
})
export class InmUserTableComponent extends InmMappedTableComponent<User> {
  @Input() override $data: Observable<User[]>;
  @Input() override config: MappingConfig<User>[] = [];
}

父组件模板中直接使用<inm-user-table>即可，无需额外指定类型。

3. 类型断言强制约束 #

若类型推断失效，可通过类型断言明确输入属性的类型：

// 父组件中
userMappingConfig = [
  { key: 'id', label: '用户ID' },
  { key: 'name', label: '用户名' }
] as MappingConfig<User>[];

关于子组件泛型的说明 #

你当前的子组件代码实现是正确的：

• 组件类通过T extends Record<string, any>定义了泛型约束，确保T是键值对类型
• $data和config均使用泛型T，保证输入数据的类型一致性
• ngOnInit中调用mappingService.getRows<T>时正确传递了泛型类型，服务可基于T完成数据映射

内容的提问来源于stack exchange，提问作者Ewan