Angular/PrimeNG父子组件值同步：如何实现全场景同步？

问题背景 #

在实现Angular+PrimeNG父子组件双向绑定时，出现值同步不符合预期的情况，具体代码及现象如下：

代码片段 #

子组件（app-field.component.html） #

<input
  type="text"
  pInputText
  [id]="id"
  [name]="name"
  [(ngModel)]="value"
  (keyup)="onKeyUp($event)"
/>

子组件（app-field.component.ts，导入部分省略） #

@Component({
  selector: 'app-field',
  templateUrl: './app-field.component.html',
  styleUrls: ['./app-field.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppFieldComponent extends InputText {
  @Input() id: string;
  @Input() name: string;
  @Input() value = '';
  @Output() valueChange = new EventEmitter<string>();

  onKeyUp(event: any): void {
    this.valueChange.emit(event.currentTarget.value);
  }
}

父组件代码 #

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule, AppFieldModule],
  template: `
  <hr>
    <app-field
        id="field"
        name="field"
        [(value)]="myvar"
        ngModel
        ngDefaultControl
    ></app-field>
    (1)
  <hr>
    {{myvar}} (2)
  <hr>  
    <input type="text" [(ngModel)]="myvar"/>
    (3)
  <hr>
  `,
})
export class App {
  myvar: string = 'hello!';
}

当前现象 #

• 在(3)右键粘贴内容，绑定值会同步更新到(1)和(2)；
• 在(1)右键粘贴内容，绑定值无法同步到(2)和(3)；
• 移除(keyup)事件后，(1)中的内容变更无法同步到(2)和(3)。

疑问 #

1. 是否有方法实现所有场景下的值同步？
2. 是否可以去掉(keyup)事件？
3. 为什么必须使用这类事件？

解答 #

1. 实现全场景值同步的方法 #

有两种更可靠的方案：

方案一：使用input事件替代keyup

input事件会在输入框内容发生任何变更时触发（包括右键粘贴、拖拽文本输入、输入法输入等所有场景），能完全覆盖需求。修改子组件的input标签：

<input
  type="text"
  pInputText
  [id]="id"
  [name]="name"
  [(ngModel)]="value"
  (input)="valueChange.emit($event.currentTarget.value)"
/>

同时可以删掉onKeyUp方法，简化代码。

方案二：利用Angular的ngModelChange事件

直接监听ngModel的变化，不需要依赖DOM事件，更符合Angular的响应式逻辑。修改子组件的input标签：

<input
  type="text"
  pInputText
  [id]="id"
  [name]="name"
  [(ngModel)]="value"
  (ngModelChange)="valueChange.emit($event)"
/>

这种方式下，ngModelChange会在value被修改时直接触发，无需再获取DOM元素的值，代码更简洁可靠。

2. 完全可以去掉(keyup)事件 #

上面两种方案都可以替代keyup，而且效果更好。keyup的局限性在于它只在键盘按键抬起时触发，无法覆盖非键盘输入的场景（比如右键粘贴），本身就不是合适的选择。

3. 为什么需要这类事件？ #

Angular的@Input是单向数据流：父组件可以把值传给子组件，但子组件修改@Input属性时，不会自动通知父组件。而你用的[(value)]是双向绑定的语法糖，展开后其实是：

<app-field [value]="myvar" (valueChange)="myvar = $event"></app-field>

也就是说，父组件的myvar更新，必须依赖子组件触发valueChange事件。如果没有任何事件触发valueChange，父组件永远不知道子组件的value已经变化，自然无法同步。

之前移除keyup后同步失效，就是因为没有任何机制触发valueChange事件，父组件的myvar得不到更新。而input/ngModelChange这类事件的作用，就是监听子组件输入框的内容变化，及时触发valueChange完成双向同步。

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