Angular跨无关页面组件传递TypeScript变量值的实现求助

方案一：共享Service（推荐，符合Angular最佳实践） #

你之前用BehaviorSubject没成功，大概率是服务没做成全局单例，或者订阅时机不对。按以下步骤操作：

1. 创建全局共享服务DateShareService：

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

@Injectable({
  providedIn: 'root' // 关键：确保服务是全局唯一实例
})
export class DateShareService {
  // 初始化BehaviorSubject，初始值设为null
  private dayClickedSubject = new BehaviorSubject<Date | null>(null);
  // 对外暴露可观察对象，防止外部直接修改Subject
  dayClicked$ = this.dayClickedSubject.asObservable();

  constructor() { }

  // 提供更新值的方法
  setDayClicked(date: Date) {
    this.dayClickedSubject.next(date);
  }
}

2. 在p1_week-chart.component.ts中注入服务并传递值：

import { DateShareService } from '../path/to/date-share.service'; // 替换成你的服务实际路径

// ...组件类代码
constructor(private dateShareService: DateShareService) {}

// 你的点击逻辑片段
else if (chart.data.labels[activeEls[0].index] == "Wednesday") {
  this.dayClicked = new Date(this.today);
  this.dayClicked.setDate(this.dayClicked.getDate() + 2);
  console.log(this.dayClicked);
  // 调用服务方法传递日期
  this.dateShareService.setDayClicked(this.dayClicked);
}

3. 在p1_day-chart.component.ts中注入服务并订阅值：

import { DateShareService } from '../path/to/date-share.service';
import { Subscription } from 'rxjs';

// ...组件类代码
private dayClickedSub!: Subscription;
receivedDate: Date | null = null;

constructor(private dateShareService: DateShareService) {}

ngOnInit(): void {
  // 订阅日期变化
  this.dayClickedSub = this.dateShareService.dayClicked$.subscribe(date => {
    if (date) {
      this.receivedDate = date;
      // 在这里写你需要用到该日期的逻辑
      console.log('接收的日期：', this.receivedDate);
    }
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  this.dayClickedSub?.unsubscribe();
}

注意：不要在组件的providers数组中重复声明该服务，否则会创建多个实例，导致传值失败。

方案二：路由参数（适用于从week页面跳转到day页面的场景） #

如果点击周三后需要跳转到day页面，可以通过路由参数传递日期：

1. 在week组件中跳转并携带参数：

import { Router } from '@angular/router';

constructor(private router: Router) {}

// 点击逻辑片段
else if (chart.data.labels[activeEls[0].index] == "Wednesday") {
  this.dayClicked = new Date(this.today);
  this.dayClicked.setDate(this.dayClicked.getDate() + 2);
  // 将日期转为ISO字符串传递
  this.router.navigate(['/path/to/day-chart'], {
    queryParams: { selectedDate: this.dayClicked.toISOString() }
  });
}

2. 在day组件中读取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.queryParams.subscribe(params => {
    if (params['selectedDate']) {
      const receivedDate = new Date(params['selectedDate']);
      // 处理日期逻辑
      console.log('接收的日期：', receivedDate);
    }
  });
}

方案三：本地存储（适用于需要持久化数据的场景） #

如果希望页面刷新后数据仍能保留，可使用localStorage或sessionStorage：

1. 在week组件中存储日期：

// 点击逻辑片段
else if (chart.data.labels[activeEls[0].index] == "Wednesday") {
  this.dayClicked = new Date(this.today);
  this.dayClicked.setDate(this.dayClicked.getDate() + 2);
  // 将日期转为字符串存入本地存储
  localStorage.setItem('selectedDay', this.dayClicked.toISOString());
}

2. 在day组件中读取日期：

ngOnInit(): void {
  const storedDateStr = localStorage.getItem('selectedDay');
  if (storedDateStr) {
    const receivedDate = new Date(storedDateStr);
    // 处理日期逻辑
    console.log('接收的日期：', receivedDate);
    // 可选：用完后删除存储，避免读取旧数据
    // localStorage.removeItem('selectedDay');
  }
}

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