Angular2+如何实现可读写属性？双向绑定失效问题求解

嘿，你的问题核心是没搞对Angular双向绑定的正确实现逻辑～ 咱们一步步来修正：

首先你原来的写法有个关键错误：不能同时给同一个属性标记@Input()和@Output()，因为@Output()要求对应的属性是EventEmitter类型，而你把counter定义成了string，这就导致组件内部的修改无法触发通知父组件的事件，自然同步不了。

正确的实现步骤 #

Angular的双向绑定语法[(xxx)]是[xxx]（输入）和(xxxChange)（输出）的语法糖，咱们得按这个规则来定义组件：

• 先定义输入属性：用@Input()标记你的counter，类型保持你需要的string
• 再定义对应的输出事件：命名必须是输入属性名 + Change，类型为EventEmitter，用来通知父组件属性变化
• 组件内部修改counter时，要同时更新输入属性并触发输出事件

完整的组件代码示例 #

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

export class MyComponent {
  // 输入属性，接收父组件传递的值
  @Input() counter: string = '';
  
  // 对应的输出事件，命名必须是counterChange
  @Output() counterChange: EventEmitter<string> = new EventEmitter<string>();

  // 假设这是你内部修改counter的方法
  updateCounter(newValue: string) {
    // 先更新组件内部的counter值
    this.counter = newValue;
    // 触发输出事件，把新值传递给父组件
    this.counterChange.emit(newValue);
  }
}

父组件的使用方式（和你原来的写法一致，完全没问题） #

<mycomponent [(counter)]="parentcounter"></mycomponent>

这样一来，当你在MyComponent里调用updateCounter方法修改counter时，父组件的parentcounter就会自动同步更新啦～

简单总结：双向绑定靠的是输入属性+对应命名的输出事件的组合，不是把同一个属性同时标记成Input和Output哦！

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