如何防止Angular 5组件的输入值被修改？

针对你开发的MultipleItemPickerComponent，要实现输入值禁止修改的功能，这里有两种实用的方案，你可以根据需求选择：

方案一：使用Getter/Setter拦截修改 #

这种方法可以灵活控制输入属性的修改时机，比如只允许初始化时赋值，之后拒绝任何修改：

export class MultipleItemPickerComponent implements OnInit { 
  // 用私有变量存储实际值
  private _itemPickerHeaderText: string;

  @Input() 
  get itemPickerHeaderText(): string {
    return this._itemPickerHeaderText;
  }
  set itemPickerHeaderText(value: string) {
    // 仅在未初始化时允许赋值，后续修改直接抛出错误（或静默警告）
    if (this._itemPickerHeaderText === undefined) {
      this._itemPickerHeaderText = value;
    } else {
      throw new Error('itemPickerHeaderText 不允许在初始化后修改');
      // 如果不想抛出错误，也可以用警告：console.warn('itemPickerHeaderText 不允许在初始化后修改');
    }
  }

  @Output() multipleItemsPickerOkClick: EventEmitter<string[]> = new EventEmitter(); 
  @Output() multipleItemsPickerCancelClick: EventEmitter<Event> = new EventEmitter();

  ngOnInit() {
    // 你的初始化逻辑
  }
}

优点： #

• 可以自定义拦截规则，比如允许特定场景下的修改
• 父组件尝试修改时会得到明确的错误/警告提示

方案二：初始化后冻结属性 #

如果希望组件初始化完成后完全禁止修改输入属性，可以用Object.defineProperty在ngOnInit中把属性设置为不可写：

export class MultipleItemPickerComponent implements OnInit { 
  @Input() itemPickerHeaderText: string; 
  @Output() multipleItemsPickerOkClick: EventEmitter<string[]> = new EventEmitter(); 
  @Output() multipleItemsPickerCancelClick: EventEmitter<Event> = new EventEmitter();

  ngOnInit() {
    // 冻结输入属性，禁止后续修改
    Object.defineProperty(this, 'itemPickerHeaderText', { writable: false });
    
    // 你的其他初始化逻辑
  }
}

注意： #

• 这个方法是运行时拦截，TypeScript编译阶段不会阻止父组件写修改代码，只有在浏览器运行时（严格模式下）才会抛出错误
• 非严格模式下修改会静默失败，建议开启严格模式确保错误能被及时发现

两种方案下，组件在模板中的使用方式都不需要改变，依然是：

<app-multiple-item-picker [itemPickerHeaderText]="yourHeaderText"></app-multiple-item-picker>

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