如何将Angular组件中的@Input属性设置为只读？

有两种常用方式可以实现Angular组件中@Input属性的只读限制：

1. 直接添加readonly修饰符 #

给@Input属性加上readonly关键字，就能限制组件内部代码无法修改该属性值，但父组件依然可以正常传递初始值或更新值。如果组件内部尝试给该属性赋值，TypeScript会在编译阶段直接报错。

代码示例：

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

@Component({
  selector: 'app-child',
  template: `<p>Name: {{ name }}</p>`
})
export class ChildComponent {
  @Input() readonly name: string;
}

2. 使用Getter封装（仅暴露读取权限） #

通过私有变量存储属性值，只对外暴露getter方法，同时保留setter来接收父组件传递的@Input值。这种方式能灵活控制属性访问逻辑，比如在获取值时做额外处理，同时避免组件内部直接修改原始值。

代码示例：

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

@Component({
  selector: 'app-child',
  template: `<p>Name: {{ name }}</p>`
})
export class ChildComponent {
  private _name!: string;

  @Input()
  get name(): string {
    return this._name;
  }

  // 必须定义setter来接收父组件传递的@Input值
  set name(value: string) {
    this._name = value;
  }
}

如果需要完全禁止父组件在初始化后修改该属性，可以结合OnChanges钩子拦截后续修改：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Name: {{ name }}</p>`
})
export class ChildComponent implements OnChanges {
  @Input() readonly name: string;
  private _hasInitialized = false;

  ngOnChanges(changes: SimpleChanges): void {
    if (this._hasInitialized && changes['name']) {
      // 抛出错误提示或忽略修改
      throw new Error('name属性为只读，初始化后不可修改');
    }
    this._hasInitialized = true;
  }
}

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