angulardart: передать событие другому компосту

Question

У меня есть два компонента: компонент A и компонент B. Оба они являются братьями и сестрами и являются дочерними элементами componentMother.

При щелчке по компоненту А событие щелчка запускается и обрабатывается обработчиком события А. Как передать это событие в componentB и обработать его обработчиком B?

Любые комментарии приветствуются. Некоторые части кодов приветствуются. Спасибо

Answer 1

используйте EventEmitter для отправки события на motherComponent .. см .: https://angular.io/api/core/EventEmitter

Answer 2

Передача события через родителя - лучшая практика, но есть и другой способ. Вы можете соединить компоненты, используя var ref.

<compA #a ></compA><compB [clickStream]="a.click"></compB>

class CompA {
  StreamController _onClick = new StreamController();
  @Output()
  Stream click = _onClick.stream;
}

class CompB {
  @Input()
  set clickStream(Stream stream) {
    stream.listen(() {
      // Do work here on click
    });
  }
}

Опять же, это не совсем лучшая практика, но она должна работать.

Answer 3

С риском, чтобы звучать немного отрывочно, вам придется пройти через вашу мать. Братья и сестры не могут напрямую разговаривать друг с другом.

Если я правильно вас понимаю, ваш mother.component.html выглядит примерно так:

<comp-a (your-event)="handleEvent()"></comp-a>
<comp-b></comp-b>

В предоставленном handleEvent() есть метод, который должен существовать в вашем MotherComponent, потому что события (EventEmitter) в Angular всегда передаются наверх их родителю.

В MotherComponent вы можете затем передать событие в CompBComponent:

export class MotherComponent {
    @ViewChild(CompBComponent)
    compB: CompBComponent;

    handleEvent() {
        this.compB.doStuff();
    }
}

Это хорошо для этого относительно простого сценария. Если вам нужно подняться на несколько слоев, а затем всегда идти вниз на несколько слоев, это решение быстро становится утомительным. Создание инъекционной службы с каким-либо свойством observable, вероятно, станет более подходящим.

p.s. Я не очень хорошо разбираюсь в Dart, так что, надеюсь, примеры TypeScript будут иметь смысл для вас.