angulardart：将事件传递给另一个组件答案

【问题标题】：angulardart: pass event to another compomentangulardart：将事件传递给另一个组件
【发布时间】：2018-07-05 05:18:50
【问题描述】：

我有两个组件组件 A 和组件 B。他们都是兄弟姐妹，都是componentMother的孩子。

当组件A被点击时，会触发一个点击事件，并由事件处理器A处理。 如何将此事件传递给componentB并由事件处理程序B处理？

欢迎任何 cmets。欢迎提供一些代码。谢谢

【问题讨论】：

标签： angular dart angular-dart

【解决方案1】：

使用EventEmitter 将事件发送到motherComponent.. 见：https://angular.io/api/core/EventEmitter

【讨论】：

【解决方案2】：

冒着听起来有点粗略的风险，你必须通过你的母亲。兄弟姐妹之间不能直接交谈。

如果我理解正确的话，你的 mother.component.html 看起来有点像这样：

<comp-a (your-event)="handleEvent()"></comp-a>
<comp-b></comp-b>

handleEvent() 提供的方法应该存在于您的 MotherComponent 上，因为 Angular 中的事件 (EventEmitter) 总是向上传递给它们的父级。

然后您可以在MotherComponent 中将事件传递给CompBComponent：

export class MotherComponent {
    @ViewChild(CompBComponent)
    compB: CompBComponent;

    handleEvent() {
        this.compB.doStuff();
    }
}

这对于这个相对简单的场景来说很好。如果你必须上多层，然后总是下多层，这个解决方案很快就会变得令人厌烦。使用某种observable 属性创建可注入服务可能会更合适。

附言我对 Dart 不是很流利，所以希望 TypeScript 示例对你有意义。

【讨论】：

【解决方案3】：

通过父级传递事件是最佳做法，但还有另一种方法。您可以使用 var ref 耦合组件。

<compA #a ></compA><compB [clickStream]="a.click"></compB>

class CompA {
  StreamController _onClick = new StreamController();
  @Output()
  Stream click = _onClick.stream;
}

class CompB {
  @Input()
  set clickStream(Stream stream) {
    stream.listen(() {
      // Do work here on click
    });
  }
}

同样，这不是最佳实践，但应该可行。

【讨论】：