AngularDart：子コンポーネントのイベントを2番目のレベルの親にどのように渡しますか

Question

私はイベントでStreamControllerを使用していますが、本質的にはA、B、Cという3レベルのコンポーネント階層を持っています。階層構造は - > B - 私はこれが直接の親で行うことが比較的容易である知っている> C.

イベントの起源は、cであり、iは、イベントがA.

によって処理されるようにしたいです - > @Outputを使用して子関係を作成しますが、複数のレベルを適切に処理する方法は不明です。

Answer 1

ありがとうございます。

これを行うにはいくつかの方法があります。

（1）（2）依存性の注入を使用し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); 
    } 
} 

から転送Bでイベントハンドラを作成します。

これは、コンポーネント間のより深い結合を必要とするため、すべてのデザインに適しているわけではありませんが、いくつかのシナリオでは意味があります。

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