Переключать вкладки в mat-tab-group синхронно с другим идентичным компонентом

Question

У меня есть mat-tab-group в компоненте под названием "персона".В родительском компоненте, называемом "персоны", у меня есть два идентичных компонента персоны, и у каждого из них есть 3 вкладки в его группе mat-tab.Я хочу, чтобы компоненты были синхронизированы с выбранной вкладкой.Например, когда я переключаюсь с вкладки 1 на вкладку 2 у одного человека, второй человек должен также сделать это.

Я пытался использовать @Input и @Output для связи между родительским компонентом и его дочерними элементами, но этоне работалЯ также попытался использовать службу для удержания выбранной вкладки, но мне чего-то не хватает, потому что компоненты по-прежнему не синхронизируются.

Это родительский компонент:

<app-person-source [person]="persons[0]"></app-person-source>
<app-person-source [person]="persons[1]"></app-person-source>

И этодочерний компонент:

<mat-tab-group class="demo-tab-group">
    <mat-tab>
      <person-details-tab></person-details-tab>
    </mat-tab>
    <mat-tab>
      <person-identifiers-tab></person-identifiers-tab>
    </mat-tab>
    <mat-tab>
      <person-merged-persons-tab></person-merged-persons-tab>
    </mat-tab>
</mat-tab-group>

Answer 1

Как вы заявили, вы можете создать общую службу для синхронизации данных между компонентами.Код услуги должен быть следующим:

@Injectable({
    providedIn: 'root'
})
export class SharedService {
    private tabIndexChanged$: BehaviorSubject<number> = new BehaviorSubject<number>(0);

    get tabIndexChanged(): Observable<number> {
        return this.tabIndexChanged$.asObservable();
    }

    tabChanged(tabIndex: number): void {
        this.tabIndexChanged$.next(tabIndex);
    }
}

После внедрения этой службы в дочерние компоненты необходимо подписаться на эту службу у детей:

this.sharedService.tabIndexChanged.subscribe(tabChanged => {
    // logic after tab changed should be here
})

Answer 2

Я заставил это работать, используя ngrx store, с 3 действиями и эффектами.Код очень похож на:

https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6/