如何对@Input - Angular附带的值进行更改

在Angular中，@Input 装饰器用于从父组件向子组件传递数据。默认情况下，@Input 的值是不可变的，也就是说，你不能直接在子组件中更改从父组件接收的值。如果你尝试这样做，Angular会抛出一个错误。

基础概念

@Input 允许父组件将数据传递给子组件。这是Angular组件通信的一种方式，特别适用于父子组件之间的单向数据流。

相关优势

• 单向数据流：有助于保持组件间的数据流清晰和可预测。
• 组件重用：允许组件在不同的上下文中重用，只需传递不同的输入值。
• 解耦：子组件不需要知道数据是如何或从哪里来的。

类型

@Input 可以接受任何类型的值，包括基本类型（如字符串、数字、布尔值）、对象、数组或其他自定义类型。

应用场景

当你需要在组件之间共享数据时，特别是在父子组件关系中，@Input 非常有用。

如何更改 @Input 值

如果你需要在子组件中更改一个 @Input 值，你应该遵循以下步骤：

1. 创建一个本地副本：在子组件中创建一个本地变量来存储 @Input 的值。
2. 监听变化：如果父组件的数据更新了，确保子组件的本地副本也更新。
3. 操作本地副本：在子组件中操作这个本地副本，而不是直接操作 @Input 值。

示例代码

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child [childInput]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Initial Value';
}

// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="changeValue()">Change Value</button>`
})
export class ChildComponent {
  @Input() childInput: string;
  localValue: string;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['childInput']) {
      this.localValue = changes['childInput'].currentValue;
    }
  }

  changeValue(): void {
    this.localValue = 'New Value';
    // 如果需要通知父组件值已更改，可以使用事件绑定
    this.change.emit(this.localValue);
  }

  @Output() change = new EventEmitter<string>();
}

在这个例子中，ChildComponent 接收一个 @Input 值 childInput，并在本地创建了一个副本 localValue。当用户点击按钮时，changeValue 方法会更新 localValue，而不是直接更改 childInput。

遇到的问题及解决方法

如果你尝试直接更改 @Input 值，Angular会抛出一个错误。解决这个问题的方法是创建一个本地副本并在本地副本上进行操作。

参考链接

• Angular @Input Decorator
• Angular Component Interaction

请注意，如果你需要将更改通知回父组件，你可以使用 @Output 装饰器和事件绑定来实现。