在角度组件之间传递参数不起作用

Posted 2023-02-23

【中文标题】在角度组件之间传递参数不起作用

【英文标题】：Passing parameters between angular components not working

【发布时间】：2020-04-22 12:44:30

【问题描述】：

我正在编写一个角度程序。它有 2 个组成部分（财产价值和购买费用）。两者都嵌入在 app.component.html 中。我想如果属性值的参数发生变化，则变化应反映在购买费用中。组件不在父子关系中。

我在服务类中使用了 Observable，但似乎未调用 PurchaseExpensesComponent 中的订阅部分代码，因此更改未反映在 purchase-expenses 组件 UI 中。

我不知道为什么。任何帮助将不胜感激。

代码-

https://stackblitz.com/edit/angular-lvhkuv

【参考方案1】：

您已经在根模块中提供 CashflowService：

@Injectable(
  providedIn: 'root'
)
export class CashFlowService 

...所以您应该删除或注释PurchaseExpensesComponent 中的providers: 行

@Component(
  selector: 'app-purchase-expenses',
  templateUrl: './purchase-expenses.component.html',
  styleUrls: ['./purchase-expenses.component.css'],
  //providers: [CashFlowService] <==== REMOVE OR COMMENT THIS LINE
)

...在PropertyValueComponent

@Component(
  selector: 'app-property-value',
  templateUrl: './property-value.component.html',
  styleUrls: ['./property-value.component.css'],
  //providers: [CashFlowService] <==== REMOVE OR COMMENT THIS LINE
)

因此，您正在为每个组件提供服务的本地实例，并且每个组件都在调用自己实例的方法。相反，您应该拥有一个由所有组件共享的单例服务。

检查我根据您的代码制作的这个 stackblitz。唯一的变化是上面提到的：https://stackblitz.com/edit/angular-7uuarq

【讨论】：

顺便说一句，恭喜您提供了您的代码的 Stackblitz。这使得尝试提供帮助变得更加容易！

这解决了问题。 @kari 非常感谢您的帮助。我是角度的新手。我希望我能正确实施它。