Question

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

在mat-tab-group中切换标签，使其与另一个相同的组件同步

2 个答案: