Angular不使用@Input实现父子组件传值？服务传值异常排查

核心问题 #

1. 饼图点击事件的this指向错误：你在pieChartOptions.onClick中使用了箭头函数，导致函数内的this并非指向pie-chart-component实例，this.getPieData()根本没有被执行，服务里的数据从未被设置。
2. 服务数据非响应式：即使修正了点击事件，用普通变量存储数据的方式不够可靠，路由跳转场景下容易出现数据同步问题。

分步解决 #

1. 修正饼图点击事件的this指向 #

把onClick的箭头函数改为普通函数并绑定组件实例的this，确保getPieData()能被正确调用：

// pie-chart-component.ts
dataParent = [1,2,3,4];

public pieChartOptions: ChartConfiguration['options'] = {
    onClick: function() {
      this.getPieData();
    }.bind(this)
};

getPieData() {
    this.dataFromPie.setData(this.dataParent);
    this.router.navigate(['/child']);
}

2. 改造服务为响应式存储（用RxJS BehaviorSubject） #

使用BehaviorSubject存储数据，它能保存当前最新值，新初始化的组件可以立即获取到数据，完美适配路由跳转场景：

// data-from-pie.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataFromPieService {
  // 初始化空数组作为默认值
  private dataParent$ = new BehaviorSubject<number[]>([]);
  // 对外暴露只读的可观察对象，避免外部直接修改数据源
  public data$ = this.dataParent$.asObservable();

  setData(data: number[]) {
    this.dataParent$.next(data);
  }

  // 同步获取当前数据（可选）
  getData(): number[] {
    return this.dataParent$.value;
  }

  constructor() { }
}

3. 子组件订阅服务数据 #

在子组件中订阅服务的可观察对象，确保路由跳转后能立即拿到最新数据，同时记得在组件销毁时取消订阅避免内存泄漏：

// child-component.ts
import { OnInit, OnDestroy } from '@angular/core';
import { DataFromPieService } from './data-from-pie.service';
import { Subscription } from 'rxjs';

export class DetailComponent implements OnInit, OnDestroy {
  dataFromParent: number[] = [];
  private dataSubscription!: Subscription;

  constructor(private dataFromPie: DataFromPieService) { }

  ngOnInit(): void {
    this.dataSubscription = this.dataFromPie.data$.subscribe(data => {
      this.dataFromParent = data;
      console.log('my data from parent', this.dataFromParent);
    });
  }

  ngOnDestroy(): void {
    this.dataSubscription?.unsubscribe();
  }
}

内容的提问来源于stack exchange，提问作者SS.h777