Angular中把ngModel绑定到@Input属性是否为不良实践？

先直接给结论：即使你确定@Input()的inputValue不会发生变化，更推荐第二种使用localInputValue的实现方式，原因如下：

1. 遵循Angular单向数据流原则 #

@Input()属性的设计初衷是父组件向子组件传递数据，子组件应仅读取该属性，而非直接修改。第一种实现里，[(ngModel)]双向绑定会直接修改inputValue这个@Input属性，这违背了Angular的单向数据流设计——父组件无法感知子组件对该属性的修改，哪怕当前inputValue不会变化，这种写法本身就埋下了维护隐患（比如后续父组件需要更新inputValue时，就会直接覆盖用户输入）。

2. 组件封装与职责更清晰 #

localInputValue是子组件的内部状态，专门用于管理输入框的用户输入，和父组件传递的初始值完全解耦。子组件的状态变化不会影响到父组件的数据源，逻辑边界清晰，符合组件封装的思想。

如果后续需要将用户输入同步回父组件，正确的做法是通过@Output()事件通知父组件，而非直接修改@Input属性，示例代码如下：

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-custom-input',
  template: `
    <input [(ngModel)]="localInputValue" (ngModelChange)="onInputChange($event)">
  `,
})
export class CustomInputComponent {
  @Input() inputValue: string;
  @Output() inputValueChange = new EventEmitter<string>();
  localInputValue: string;

  ngOnInit() {
    this.localInputValue = this.inputValue;
  }

  onInputChange(value: string) {
    this.inputValueChange.emit(value);
  }
}

父组件可以通过双向绑定语法[(inputValue)]="parentValue"来同步状态，既遵循规范又满足业务需求。

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