AngularDart如何获取子组件@Output输出值并同步更新父组件属性

错误原因分析 #

你的原有写法存在两个核心问题：

• 子组件中@Output()装饰的属性类型错误，AngularDart中@Output()必须是EventEmitter<T>类型，用于向外发射事件和数据，不能直接声明为业务数据类型Result
• 父组件模板的绑定语法混淆了输入输出逻辑：[]是父到子的输入绑定，子到父的事件监听需要用()语法，输入绑定的写法自然无法接收子组件的数据

正确实现步骤 #

第一步：修正子组件代码 #

@Component(
  selector: 'child',
  templateUrl: 'child.html',
)
class ChildComponent {
  // 声明Output事件，泛型指定发射的数据类型为Result
  @Output()
  EventEmitter<Result> childResult = EventEmitter<Result>();

  // 子组件值变化时调用该方法向外发射最新数据
  void onResultChange(Result newResult) {
    childResult.add(newResult);
  }
}

第二步：修正父组件模板绑定 #

父组件无需修改类代码，只需要将parent.html中的绑定改为事件监听语法即可：

<child (childResult)="parentResult = $event"></child>

其中$event是固定语法，指代子组件通过EventEmitter.add()方法发射的Result实例，子组件每次发射新值时，都会自动赋值给父组件的parentResult属性。

不推荐的可选方案（紧耦合） #

如果特殊场景需要在子组件中直接访问父组件实例，可以通过@Host()装饰器配合依赖注入实现，但会造成父子组件紧耦合，常规场景不建议使用：

@Component(
  selector: 'child',
  templateUrl: 'child.html',
)
class ChildComponent {
  final ParentComponent parent;
  ChildComponent(@Host() this.parent);

  // 直接修改父组件属性
  void updateParentResult(Result newResult) {
    parent.parentResult = newResult;
  }
}

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