切换 mat-tab-group 中的选项卡与另一个相同的组件同步答案

【问题标题】：Switch tabs in mat-tab-group in sync with another identical component切换 mat-tab-group 中的选项卡与另一个相同的组件同步
【发布时间】：2019-10-04 17:19:46
【问题描述】：

我在一个名为“person”的组件中有一个 mat-tab-group。在名为“persons”的父组件中，我有两个相同的 person 组件，每个组件在其 mat-tab-group 中都有 3 个选项卡。我希望组件与其选择的选项卡同步。例如，当我在一个人中将 tab 1 切换到 tab 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>

【问题讨论】：

标签： angular angular-material

【解决方案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
})

【讨论】：

感谢您的回答。我在子组件中注入并订阅了服务，但是选项卡的功能仍然只在子组件中，所以我无法从包含它们的父组件中控制两个子组件。
据我了解，您不需要从父母控制孩子，您可以从服务中做到这一点。在一个孩子中更改标签后，您可以在孩子中调用 tabChanged(tabIndex) 方法，然后您可以通过订阅主题在另一个孩子中获取 tabIndex，如答案帖子所示。你清楚吗？让我知道这是否适用于您的情况。

【解决方案2】：

我使用ngrx store 使其工作，具有 3 个动作和效果。代码非常类似于：

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

【讨论】：