如何将对象的多个指定字段作为props传入Angular组件？

针对你遇到的「不想在模板里写20-30个零散props，希望用简洁方式传递Product对象的部分字段给app-item组件」的问题，结合你已经用Pick定义了组件输入类型的情况，这里有几个实用方案：

方案1：实现自定义filterProps管道（匹配你期望的一行写法） #

先创建一个通用管道，用来过滤对象的指定字段：

// filter-props.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterProps' })
export class FilterPropsPipe implements PipeTransform {
  transform<T, K extends keyof T>(value: T, keys: K[]): Pick<T, K> {
    return keys.reduce((acc, key) => {
      acc[key] = value[key];
      return acc;
    }, {} as Pick<T, K>);
  }
}

记得在模块里声明这个管道，然后在模板里直接调用，传入需要保留的字段：

<!-- list.component.html -->
<app-item 
  *ngFor="let product of products" 
  [item]="product | filterProps: ['title', 'description', 'url']"
/>

如果想避免重复写字段数组，可以在item.component.ts里导出定义好的类型，再写个工具函数获取字段名：

// item.component.ts
import { Input, Component } from '@angular/core';
import { Product } from './product.type';

export type ItemInput = Pick<Product, 'title' | 'description' | 'url'>;
// 工具函数：获取ItemInput的所有字段名
export const ItemInputKeys = ['title', 'description', 'url'] as const;

@Component({ /* 组件元数据 */ })
export class ItemComponent {
  @Input() item: ItemInput;
}

然后在父组件里导入ItemInputKeys，模板里直接用：

<app-item 
  *ngFor="let product of products" 
  [item]="product | filterProps: ItemInputKeys"
/>

方案2：父组件提前预处理数据（更可控，避免管道） #

在父组件的逻辑层提前把原始数据转换成符合ItemInput类型的数组，这样模板会非常简洁：

// list.component.ts
import { Component } from '@angular/core';
import { Product } from './product.type';
import { ItemInput } from './item.component';

@Component({ /* 组件元数据 */ })
export class ListComponent {
  products: Product[] = /* 你的数据源 */;
  // 预处理：只保留需要的字段
  itemList: ItemInput[] = this.products.map(product => ({
    title: product.title,
    description: product.description,
    url: product.url
  }));
}

模板里直接遍历预处理后的数组：

<!-- list.component.html -->
<app-item *ngFor="let item of itemList" [item]="item" />

方案3：直接传递整个Product对象（最简写法，类型安全） #

其实你已经用Pick<Product, ...>定义了item的类型，而Product本身包含所有ItemInput需要的字段，TypeScript会允许直接把整个product对象传给[item]——因为类型系统会确保组件只能访问你指定的字段，不会出现越界访问的问题。这种写法完全不用额外处理，是最简洁的：

<!-- list.component.html -->
<app-item *ngFor="let product of products" [item]="product" />

如果后续Product类型修改，导致缺少ItemInput需要的字段，TypeScript会在编译阶段直接报错，提前规避问题。

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