Angular组件多@Input设置后如何以数组形式访问？

首先直接给结论：Angular并没有提供一个内置的@Inputs数组让你直接获取所有已设置的输入属性——你没法在constructor或ngOnInit里直接拿到这样的集合，不过有几种可靠的手动处理方式，下面详细说明：

为什么没法直接获取？ #

Angular的@Input装饰器只是用来标记组件/指令的输入绑定属性，但它不会自动把这些属性收集到一个内置的数组或集合中。另外要注意：

• 在constructor阶段，Angular还没完成输入属性的赋值（组件实例化后才会进行输入绑定），所以哪怕有这样的数组，此时也拿不到实际值；
• 到ngOnInit阶段，输入属性已经完成赋值，但依然没有内置的集合可以直接调用。

手动处理的两种可行方案 #

1. 手动维护输入属性列表（推荐生产环境使用）

这是最稳妥、最可控的方式——你自己在组件里定义一个包含所有输入属性名的数组，然后通过对象属性访问的方式批量获取值：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit {
  // 先确保setter对应的属性有存储变量和getter（否则访问时会直接触发setter）
  private _inputOne!: string;
  private _inputTwo!: string;
  private _inputThree!: string;

  @Input() public set inputOne(value: string) { 
    this._inputOne = value;
    // 你的其他逻辑
  } 
  public get inputOne(): string { return this._inputOne; }

  @Input() public set inputTwo(value: string) { 
    this._inputTwo = value;
    // 你的其他逻辑
  } 
  public get inputTwo(): string { return this._inputTwo; }

  @Input() public set inputThree(value: string) { 
    this._inputThree = value;
    // 你的其他逻辑
  } 
  public get inputThree(): string { return this._inputThree; }

  // 手动维护输入属性名列表
  private readonly inputPropertyNames = ['inputOne', 'inputTwo', 'inputThree'];

  ngOnInit(): void {
    // 获取所有输入值的数组
    const allInputValues = this.inputPropertyNames.map(prop => this[prop]);
    console.log(allInputValues); // 输出 ["Hello", "World", "!"]

    // 或者获取键值对形式的对象
    const inputKeyValueMap = this.inputPropertyNames.reduce((map, prop) => {
      map[prop] = this[prop];
      return map;
    }, {} as Record<string, string>);
    console.log(inputKeyValueMap); // 输出 {inputOne: "Hello", inputTwo: "World", inputThree: "!"}
  }
}

这种方式的好处是完全不依赖Angular内部实现，版本兼容稳定，而且你可以灵活控制哪些属性被包含进来。

2. 通过Angular内部元数据反射获取（仅临时/调试场景使用）

Angular会把组件的元数据存储在一个内部的ɵcmp属性中（注意这个是私有API，带下划线前缀，可能在Angular版本更新中发生变化），你可以通过它来自动获取所有标记为@Input的属性名：

ngOnInit(): void {
  // 获取组件的内部元数据
  const componentMeta = (MyComponent as any).ɵcmp;
  // 提取所有输入属性的名称
  const inputNames = Object.keys(componentMeta.inputs);
  
  // 批量获取值
  const allInputs = inputNames.map(name => this[name]);
  console.log(allInputs);
}

⚠️ 注意：这种方法依赖Angular内部实现，不是官方公开的API，生产环境不建议使用，避免升级Angular后出现兼容性问题。

关于setter型@Input的重要提醒 #

你的@Input都是setter形式，这时候一定要确保组件中存在对应的私有存储变量和getter方法——如果只有setter没有getter，直接通过this[propName]访问时会触发setter逻辑，可能导致意外的行为（比如重复执行setter里的处理代码）。所以一定要给每个setter配上对应的getter，就像第一种方案里那样。

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