Как я могу захватить событие в компоненте, который излучается из другого компонента?

Question

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

Я сделал следующий код

myservice.ts

private _event = new EventEmitter<any>();

get event(): EventEmitter<any> {
  return this._event;
}

mycomponent_2.ts

this.myservice.event.emit(true);

mycomponent_1.ts - добавлен следующий код в ngOnInit ()

this.myservice.event.subscribe((value) =>  {
  console.log(value);
});

Ожидаемый консольный журнал не распечатан. Похоже, что событие не записано в component_2

Как я могу решить эту проблему? Нужно ли перемещать код в другую ловушку жизненного цикла?

Answer 1

Использование Субъект : Субъект похож на Наблюдаемый, но может передавать многоадресные сообщения многим Наблюдателям. Темы похожи на EventEmitters: они поддерживают реестр многих слушателей.

в service

   @Injectable({
    providedIn: 'root',
})
export class YourService {

    private yourVariable: Subject<any> = new Subject<any>();


    public listenYourVariable() {
        return this.yourVariable.asObservable();

    }


    public yourVariableObserver(value : type) {
        this.yourVariable.next(value);
    }

Вы импортируете в свои компоненты , где хотите воспользуйтесь этим сервисом.

import{ YourService } from ...

В компонент вы хотите записать вызов данных:

this.yourService.yourVariableObserver(yourData);

в то время, когда вы хотите прочитать данные:

  this.yourService.listenYourVariable().subscribe(
        variable => {
          this.data = variable;
        }

)

Answer 2

Вы должны использовать ReplaySubject , чтобы он испускал ранее выданное значение. EventEmitter теряет любые значения после их отправки.

Если служба пытается выдать значение до создания компонента, то значение будет потеряно, если вы не используете один из объектов буферизации.

private _event = new ReplaySubject<any>(1);

get event(): EventEmitter<any> {
  return this._event;
}

Существует также BehaviorSubject , который позволяет определить значение по умолчанию , которое отправляется до первого вызова next().

Answer 3

Один из предпочтительных вариантов - BehaviorSubject. Здесь услуга может использоваться для обмена данными между двумя компонентами.

Это очень полезно, когда компоненты не связаны друг с другом.

Пример: Сервис : StringService

private testString=new BehaviorSubject<string>("Test") //Default value can be passed
public stringValue=this.testString.asObservable();


  passStringChange(project:string){
    this.testString.next(project)
  }

Компонент 1:

str:string

clickHere(){
this.stringService.passStringChange(str)
}

Компонент 2:

stringObtained:string
this.stringService.stringValue.subscribe(message=>this.stringObtained=message)

Answer 4

Если вы хотите использовать событие, читайте дальше. Я создал репо и получил эту работу, добавив @output к событию следующим образом:

export class MyServiceService {
@Output() event = new EventEmitter<any>();

constructor() {}

}

, чтобы убедиться, что не было проблем с синхронизацией, я создал одну кнопку для добавления слушатель в одном компоненте и другая кнопка для запуска события. Таким образом, я думаю, что основной ошибкой является отсутствие декоратора @Output.