angular - 在 Angular 组件之间传递参数不起作用

Question

我正在编写一个 Angular 程序。它有 2 个组成部分(属性(property)值(value)和购买费用)。两者都嵌入在 app.component.html 中。我想如果属性值的参数发生变化，则变化应反射(reflect)在购买费用中。组件不在父子关系中。

我在服务类中使用了 Observable，但似乎 PurchaseExpensesComponent 中代码的订阅部分没有被调用，因此更改没有反射(reflect)在 purchase-expenses 组件 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