如何为Angular组件传参并在ng-template中保留TypeScript类型

可以实现，核心是利用Angular泛型组件约束类型，让ng-template中的变量继承输入数据的类型，从而获得类型检查和自动补全支持。

解决方案步骤 #

1. 将FooComponent改造为泛型组件

调整组件定义，引入泛型参数T，分别约束@Input() data的类型和TemplateRef的上下文类型：

import { CommonModule } from '@angular/common';
import { Component, ContentChild, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'foo',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <ng-container *ngTemplateOutlet="fooTemplate; context: { data }" />
    </div>
  `,
})
export class FooComponent<T> {
  @ContentChild('foo') fooTemplate!: TemplateRef<{ data: T }>;
  @Input() data!: T; // 用泛型T替代any，约束输入类型
}

2. 父组件中使用泛型组件

在父组件中，TypeScript会自动根据data的输入值推断泛型类型，也可以显式指定泛型，确保模板中的变量获得正确类型：

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import 'zone.js';
import { FooComponent } from './foo.component';

// 定义自定义类型
type Person = {
  name: string;
  age: number;
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FooComponent],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>

    <!-- 显式指定泛型为Person，模板中person变量会获得Person类型提示 -->
    <foo [data]="person$ | async">
      <ng-template #foo let-person="data">
        {{ person.name }} - {{ person.age }}
      </ng-template>
    </foo>
   
    <!-- TypeScript自动推断泛型为number[]，numbers变量支持数组方法补全 -->
    <foo [data]="[1,2,3,4]">
      <ng-template #foo let-numbers="data">
        {{ numbers.join(', ') }}
      </ng-template>
    </foo>
  `,
})
export class App {
  name = 'Angular';

  person$ = of<Person>({
    name: 'toto',
    age: 3,
  });
}

bootstrapApplication(App);

关键说明 #

• 泛型参数T会贯穿组件的输入和模板上下文，确保ng-template中通过let-xxx="data"获取的变量类型与输入的data类型完全一致。
• 对于async管道处理的可观察对象，TypeScript会自动解析可观察对象的泛型类型，传递给FooComponent的T，无需额外处理。
• 无论是基本类型（字符串、数字）、数组还是自定义对象，都能获得完整的类型检查和IDE自动补全支持。

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