ngOnInit не подписывается на наблюдаемое событие - PullRequest
Новая
       22

ngOnInit не подписывается на наблюдаемое событие

0 голосов
/ 17 октября 2018

Я имею дело с проблемой, которую до сих пор не смог решить.
Дело в том.У меня есть компонент с именем HeaderComponent, служба с именем TabChangingService и другой компонент с именем TabsComponent.В HeaderComponent у меня есть три кнопки, и у каждой из этих кнопок есть следующий метод щелчка.

click(tab: number) {
    this.tabChangingService.changeTab(tab);
    this.router.navigate(['/tabs'])
}

И в ngOnInit методе TabsComponent есть следующее: 

ngOnInit() {
  this.tabChangingService.tab.pipe(
   tap(tab => this.tab = tab),
   tap(tab => console.log('setting tab ', tab) // added this linte
  ).subscribe();
}

А в шаблоне у меня есть следующий код: 

<ng-container [ngSwitch]="tab">
  <div id="tab1" *ngSwitchCase="0">content...</div>
  <div id="tab2" *ngSwitchCase="1">content...</div>
</ng-container>

Код службы следующий: 

export class TabChangingService {

  private _tab = new Subject<number>();

  constructor() {

  }

  public changeTab(tab: number) {
    console.log('Changing to tab ', tab); // added this line
    this._tab.next(tab);
  }

  public get tab() {
    return this._tab;
  }

}

Но когда я нажимаю одну из кнопок компонента заголовка, вкладка не выбирается.Только после того, как я нажму второй раз, вкладка будет выбрана.Как вы могли заметить, компонент вкладок находится на другом маршруте, и я не знаю, что это происходит, потому что компонент не монтируется в тот момент, когда я нажимаю кнопку в первый раз или что-то в этом роде, но я надеюсь, что вы мне поможете,Заранее спасибо, очень признателен за вашу помощь.

РЕДАКТИРОВАТЬ
Когда я нажимаю одну из кнопок на заголовке в первый раз, печатается Changing tab, однако Setting tabнет.Setting tab не печатается, пока я не нажму второй раз.

Ответы [ 3 ]

0 голосов
/ 18 октября 2018

в сервисе смены вкладок добавьте это .. 

private _tab = new Subject<number>();
tabChanged = this._tab.asObservable();

и в свой ngOnInit () добавьте это .. 

ngOnInit() {
 this.tabChangingService.tabChanged.subscribe(
   // add your code here.
 );

Вы не упомянули, есть ли в этих компонентахтакие отношения между ними.но это не должно иметь значения, поскольку у вас есть служба.Вы забыли инициализировать свою переменную Observable.

Я показал в коде, что я понял о взаимодействиях Observables и Subject.Пожалуйста, поправьте меня, если я ошибаюсь в словах, которые я написал выше.

0 голосов
/ 19 октября 2018

Я решил проблему с setTimeout, как предложил Сунил.Но setTimeout использовался не в TabsComponent, а в HeaderComponent в момент выдачи выбранного значения, например: 

click(tab: number) {
 setTimeout(() => {
    this.tabChangingService.changeTab(tab);
   },
   500
 )
 // rest of the code
}

Спасибо всем за помощь: D

0 голосов
/ 17 октября 2018

Попробуйте setTimeout 

ngOnInit() {
  this.tabChangingService.tab.pipe(
   tap(tab => {
      setTimeout(()=>{   
        this.tab = tab
      }, 1);
   })
  ).subscribe();
}

Просто увеличьте продолжительность тайм-аута, чтобы убедиться, что это проблема инициализации компонента.

...