AngularDart：如何将事件从子组件传递到第二级父组件

Question

我正在使用带有事件的StreamControllers，基本上我有一个3级组件层次结构让我们称之为A，B，C。层次结构是A - > B - > C.

事件的起源在c中，我希望事件由A处理。

我知道这对于使用@Output的直接父 - >子关系很容易，但不确定如何正确处理多个级别。

Answer 1

谢谢你的询问。

有几种方法可以做到这一点。

（1）在B中创建一个从C转发的事件处理程序

@Component(
  selector: 'b',
  directives: const [C],
  template: '<c (event)="cDidEvent()"></c>',
)
class B {
  final _onEvent = new StreamController();
  Stream get onEvent => _onEvent.stream;

  void cDidEvent() {
    _onEvent.add(null);
  }
}

（2）使用依赖注入。

这需要组件之间更深的耦合，因此它不适合所有设计，但在某些情况下可能有意义。

abstract class OnEvent {
  /// Called when an event happens.
  void onEvent();
}

@Component(
  selector: 'a',
  directives: const [B],
  template: '<b></b>',
  providers: const [
    const Provider(OnEvent, useExisting: A),
  ],
)
class A implements OnEvent {
  @override
  void onEvent() {
    print('>>> An event was triggered!');
  }
}

class C {
  final OnEvent _eventHandler;

  C(this._eventHandler);

  void onSomeAction() {
    _eventHandler.onEvent();
  }
}

Answer 2

我认为创建一个注入组件A和组件C的“事件总线”单例服务会更容易。

这是代码：

class Event {
     // your data
}

@Injectable()
class EventBus {

    final StreamController<Event> _onEventStream = new StreamController<Event>();
    Stream<Selection> onEventStream = null;

    static final EventBus _singleton = new EventBus._internal(); 

    factory EventBus() {
         return _singleton;
    }

    EventBus._internal() {
         onEventStream = _onEventStream.stream;
    }

    onEvent(Event event) {
         _onEventStream.add(selection);
    }
}


@Component(
   selector: 'C',
   templateUrl: 'C.html',
   providers: const [
       EventBus
   ]
 )
 class C {

     final EventBus _eventBus;

     C(this._eventBus);

     onAction() {
         _eventBus.onEvent(new Event());
    }
 }


@Component(
    selector: 'A',
    templateUrl: 'A.html',
    providers: const [
        EventBus
    ]
)
class A {

    final EventBus _eventBus;

    A(this._eventBus) {
        _eventBus.onEventStream.listen((Event e) => /* do something with the event */)
    }
}