Angular Material父组件路由调用子组件时如何实现跨组件数据传递

方案说明 #

路由动态加载的子组件没有在父组件模板中显式声明标签，因此无法直接绑定@Output事件，针对你的需求有两种成熟实现方案：

方案1：仅需持久化保存（刷新页面不丢失，最简实现） #

不需要额外写服务，直接用浏览器本地存储完成读写即可：

1. 修改子组件childComponent.ts代码：

// 组件初始化时读取存储的tab索引
ngOnInit() {
  const savedTabIndex = localStorage.getItem('lastActiveTab');
  if(savedTabIndex) {
    this.currentTabIndex = Number(savedTabIndex);
  }
}

public tabChanged(tabChangeEvent: MatTabChangeEvent) {
  // tab切换时存储最新索引
  localStorage.setItem('lastActiveTab', tabChangeEvent.index.toString());
  // 原有@Output可以直接删除，不再需要
}

子组件HTML无需修改，双向绑定的selectedIndex会自动生效，下次跳转回子组件路由时会直接读取存储值选中对应tab。

方案2：需要多组件共享状态（如父组件要实时拿到tab索引做其他处理） #

用全局单例服务+RxJS BehaviorSubject实现跨组件状态共享：

1. 新建共享状态服务tab-state.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 全局单例，全应用可访问
})
export class TabStateService {
  // 初始值可以从localStorage读取，支持刷新保留状态
  private lastTabIndex = new BehaviorSubject<number>(
    Number(localStorage.getItem('lastActiveTab') || 0)
  );
  // 对外暴露只读的可观察对象
  public lastTabIndex$ = this.lastTabIndex.asObservable();

  // 更新tab索引
  updateTabIndex(index: number) {
    this.lastTabIndex.next(index);
    localStorage.setItem('lastActiveTab', index.toString());
  }
}

2. 修改子组件childComponent.ts代码：

import { TabStateService } from './路径/tab-state.service';

constructor(private tabStateService: TabStateService) {}

ngOnInit() {
  // 订阅最新的tab索引，同步到当前组件
  this.tabStateService.lastTabIndex$.subscribe(index => {
    this.currentTabIndex = index;
  });
}

public tabChanged(tabChangeEvent: MatTabChangeEvent) {
  // 调用服务更新状态
  this.tabStateService.updateTabIndex(tabChangeEvent.index);
}

3. 如果父组件需要获取tab索引，直接在父组件中注入服务订阅即可：

// top-nav.component.ts
constructor(private tabStateService: TabStateService) {}

ngOnInit() {
  this.tabStateService.lastTabIndex$.subscribe(index => {
    console.log('当前激活的tab索引：', index);
    // 父组件自定义逻辑
  });
}

内容的提问来源于stack exchange，提问作者Masoud Kameli