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 的 "event bus" 单例服务更容易。

代码如下：

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 */)
    }
}

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

AngularDart: How do you pass an event from a Child component to a second level parent

events

dart

angular-dart