我正在使用StreamControllers事件,基本上我有一個3級組件heirarchy可以稱它們爲A,B,C。該層次結構爲A - >乙 - > C.AngularDart:你如何將一個事件從一個子組件傳遞給二級父項
事件的起源是在C和我想通過A.要處理的事件
我知道這是相當容易的直接父母做 - >使用@Output的孩子關係,但不知道如何正確處理多個級別向上。
我正在使用StreamControllers事件,基本上我有一個3級組件heirarchy可以稱它們爲A,B,C。該層次結構爲A - >乙 - > C.AngularDart:你如何將一個事件從一個子組件傳遞給二級父項
事件的起源是在C和我想通過A.要處理的事件
我知道這是相當容易的直接父母做 - >使用@Output的孩子關係,但不知道如何正確處理多個級別向上。
感謝您的詢問。
有幾種方法可以做到這一點。
(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();
}
}
我認爲這是更容易只是創建在成分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 */)
}
}