如何将数据从 app.component 发送到其他（子）组件

Question

我正在使用角度 6。我想将数据（我从外部 API 获取）从 app.component 发送到其他（子）组件，我不想在所有组件中单独重复调用该公共 API/服务。 我想调用一次，所以这就是我调用 app.component.ts 的原因

这是一个服务/API代码

this.mainService.getBaseModel().subscribe(ret => {
        this.basemodel = ret;
    }, error => { }, () => {
});

我想在我的应用程序的所有组件中发送这个“basemodel”值。 帮助我更好地解决和理解它。 谢谢你。

Answer 1

有两种方法可以实现这一点，

1. @Input ，这样我们就可以将数据从parent component传递给每个child component组件。
2. 为所有这些创建一个公共服务，然后使用服务方法获取对象

如果你有一个或两个组件来共享来自 Parent 的数据，那么使用Input否则 Service 与最新的 RxJs 类（ BehaviourSubject ， Subject等）可能真的很容易。

如果你想关注@Input 然后关注这篇文章 - 将@input 数据传递给孩子

按照这个为 BehaviourSubject 服务 - https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

Answer 2

在不知道您应用程序的结构的情况下，很难说要使用哪种方法。 你可以使用：

• @Input()和@Output()的组合
• 另一种保存和分发数据的服务
• 像 ngrx 这样的商店

Answer 3

在 Angular 的官方文档中，您可以找到几种解决方法。 它们可以在这里找到： https ://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

这里也有上述方法的实例： https ://stackblitz.com/angular/plpgkjondrl