Angular - запуск функции дедушки при выполнении функции дедушки - PullRequest
Новая
       6

Angular - запуск функции дедушки при выполнении функции дедушки

0 голосов
/ 06 января 2020

У меня есть следующая структура компонентов:

Компонент A -> Компонент B -> Компонент C

В шаблоне Компонент C у меня есть кнопка, которая при нажатии вызывает функцию в «коде позади».

Я пытаюсь добиться того, чтобы каждый раз, когда эта функция вызывалась, я хочу, чтобы функция в Компоненте А. вызывалась.

Компонент А является родителем компонента C

Я мог бы передать EventEmitter вниз в Компонент B, а затем в Компонент C, но я не хочу этого делать.

Я пробовал следующее:

SharedService.ts 

@Injectable()
export class SharedService{
  private subject = new BehaviorSubject<any>(null);

  constructor() {}

  valueClicked() {
    console.log('Value Clicked has been called');
    this.subject.next({});
  }

  getValue(): Observable<any> {
    return this.subject.asObservable();
  }
}

Компонент C .ts Метод 

public buttonClicked(): void {
    this.sharedService.valueClicked();
  }

ComponentA.ts ngOnInit 

public ngOnInit(): void {
    this.subscription = this.sharedService.getValue().subscribe(message => {
      console.log('Function Called');
    });
  }

Я бы ожидал, что каждый раз, когда функция вызывается в Компоненте C, Компонент А будет регистрировать «Вызванная функция», но это не так.

Ответы [ 2 ]

0 голосов
/ 06 января 2020

Ваш код для общего сервиса выглядит так, как будто он должен работать. Вы уверены, что у вас есть один и тот же экземпляр службы в каждом компоненте? В SharedService.ts измените @Injectable() на @Injectable({ providedIn: 'root' }), это обеспечит единый сервис в приложении.

0 голосов
/ 06 января 2020

Вы можете использовать оператор take (1), который принимает только одно значение и сразу завершает цепочку (не нужно использовать asObservable). 

getValue(): Observable<any> {
   return this.subject.take(1);
}

Теперь каждый раз, когда вы делаете это.subject.take (1 ) вы сразу получите одно значение и заполните его.

...