Angular 7: 如何使用服务代替@Input?

Question

到处都声明，您可以通过@input或服务将数据从父级传递到子级。我们有一个始终使用服务的策略，但在这种特殊情况下，我只知道如何用@Input来实现它。这段代码非常适合我的意图：

父 - 组件.html

<ul>
<li *ngFor="let item of items">
<app-item [item]="item"></app-item>
</li>
</ul>

子项(应用项( - 组件.ts

@Input() item: Item = {price: 0; size: 0; color: 'none'};

如何更改子项，以便数据将来自服务？我知道如何在"onClick"上执行此操作，但是当父级不涉及用户操作时，我不知道如何做到这一点，只是列表的裸露显示(出于其他原因，父项和子项必须是单独的组件(。

我能想象到的唯一方法是可行的(但这是一个可怕的想法(，如果在父级的每次迭代中，我会做类似 subject.next(item( 的事情。 任何想法都会非常受赞赏，我完全迷失在我应该做什么。

Answer 1

编辑：澄清问题后，您最好的选择是@Input()装饰器。数据来自 API 并针对每个组件进行更改，因此，使用服务不是一个好主意。用你所拥有的，说服你的主管。

创建服务：

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
@Injectable()
export class MyService {
item = new BehaviorSubject<any>(null);
constructor() {
}
}

将上述服务导入到父组件和子组件。父组件更新值，子组件观察它。

在需要更新的父级中：

this.myService.item.next('Pass this data to the child');

在孩子订阅它：

this.myService.item.subscribe(data => this.data = data);

在父组件和子组件中：

constructor(private myService: MyService) {}

并确保在ngOnDestroy()中取消订阅。