Question

我正在使用带有事件的StreamControllers，基本上我有一个3级组件层次结构可以调用它们，A，B，C。层次结构是A - > B - ＆gt;下进行。

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

我知道直接父母很容易做到这一点 - ＆gt;使用@Output的子关系但不确定如何正确处理多个级别。

Answer 1

感谢您的提问。

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

（1）在<a routerLink="/my-path">link1</a>中创建一个从B

转发的事件处理程序

（2）使用依赖注入。

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

@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);
  }
}

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

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

2 个答案: