利用父组件更新子组件中的D3图表

正在探索使用D3.js创建可缩放的交互式图形（参考示例：示例链接）。此项目中，我设计了一个主控父组件，负责所有核心计算任务，包括坐标轴的刻度设置和数值精度等，以及两个子组件：

• 一个用于渲染Y/X轴（组件A），其图例依据父组件提供的@input数据动态生成；
• 另一个构建主要图形的组件（组件B），同样基于父组件传递的@input参数。

目标是在第二个图形上应用的画笔操作能够影响第一个图形的显示效果，尤其是X轴的数据更新。为此，我尝试通过引入一个共享服务来同步父组件中的刻度信息，进而通过@input机制通知组件A进行相应的UI更新。然而，在实际操作过程中遇到了如下错误：

ExpressionChangedAfterItHasBeenCalledError：在Angular的变更检测机制下，表达式的值在首次检测后再次发生改变。

这个问题提示我们，直接在变更检测周期内修改输入属性可能会导致不稳定状态或无限循环。那么，这种跨组件的数据同步方式是否可行？如果可行，又该如何正确实现呢？