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

Question

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

我在服务类中使用了 Observable，但似乎 PurchaseExpensesComponent 中代码的订阅部分没有被调用，因此更改没有反映在购买费用组件 UI 中。

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

代码 -

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

Answer 1

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

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

...所以你应该删除或评论行providers:在PurchaseExpensesComponent

@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