Angular 7：如何使用服务而不是@Input？答案

【问题标题】：Angular 7: How to use a service instead of @Input?Angular 7：如何使用服务而不是@Input？
【发布时间】：2020-01-02 22:22:02
【问题描述】：

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

父级 - component.html

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

子（应用程序项）-component.ts

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

如何更改子项，以便数据将来自服务？我知道如何在“onClick”中执行此操作，但不知道在父级上不涉及用户操作时如何执行此操作，只是显示列表（出于其他原因，父级和子级必须是单独的组件）。

我能想象这会起作用的唯一方法（但这是一个糟糕的想法），如果在父级的每次迭代中，我会做一些类似 subject.next(item) 的事情。任何想法都会非常受欢迎，我完全不知道我应该做什么。

【问题讨论】：

subject.next(item) 你就是这样做的。
孩子中是否存在“onClick”？
但是我把这个放在哪里呢？抱歉，我知道这一定是个愚蠢的问题，但我对 Angular 很陌生。
不，'onClick' 不存在，也许它会在应用程序增长时出现，但现在不存在。
我有种感觉，你可能误解了你的主管的意图或你有什么。你做了很多完美的实现。输入在这个星座中效果最好，因为虽然您可以使用 *ngFor 渲染组件，但您无法知道哪个组件获取哪组数据。如果他们禁止使用 @Input 指令，他们基本上应该放弃使用 Angular 进行开发

标签： angular angular-services angular-components

【解决方案1】：

编辑： 澄清问题后，您的最佳选择是@Input()decorator。数据来自 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()。

【讨论】：

非常感谢您的回答！我遇到的问题是我在父组件中收听items - 它们作为可观察的（http调用）进入并且我订阅了它。我遍历它们的唯一地方是在父 component.html 中，我不知道如何处理这个作为流出现的项目列表（除了订阅它然后在 html 中循环它）。有什么建议吗？
以我有限的知识，我只能想象这样做：<ul> <li *ngFor="let item of items" somehow call the method here: subject.next(item)> <app-item [item]="item"></app-item> </li> </ul>
@Many 你在迭代中传递项目吗？
@Mandy 我知道你的问题了。对于这种情况，该服务确实不是一个好的解决方案。请使用@Input()