Angular 使用共享服务与使用多个组件的@Input数据相比，哪一种做法更好？

如果我将服务传递到main.ts，我就可以在任何地方访问它，而不必在子组件中调用新的提供者。在该服务中，我有正在变化的变量

---

最好将这些变量发送到每个子组件、孙子组件等，还是在需要时调用我组件中的服务来获取这些变量？

用于父-子-孙子场景。当您有路由和同级组件时，@Input-API不会在任何地方对您有所帮助。如果您想要双向沟通，您必须在家长和孩子中进行管理。后来，随着时间的推移，管理变得越来越复杂。

当您有路由和父子孙/兄弟组件时，您可以使用共享服务。 如果变量在服务中发生变化，您可以使用RXjs库更新组件。您必须在一个地方管理所有内容，并在您计划使用服务的组件中订阅可观察的内容。

---

因此，我根据我共享服务是使用Rxjs库的一个很好的解决方案。您可以通过将服务注入bootstrap函数来使其成为单例。

该

@Input

和

@Output

装饰器主要用于共享来自父-子和子-父-嵌套组件的数据

通过共享服务和RxJS，非嵌套组件也可以订阅属性，并在更改时相应地执行操作。下面是一个简单的示例，当从应用程序中的任何位置调用

this.myService.update（）

方法时，它会发出一个新值：

// myservice.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MyService {
  wat$: Subject<any>;

  constructor() {
    this.wat$ = new Subject();
  }

  update() {
    this.wat$.next(new Date().getTime());
  }
}

---

如果我正确理解了这个问题，我们可能还需要考虑与这些决策相关的两个不同方面

@Input/@Output-帮助您的组件独立，而不与任何特定服务绑定。假设它是一个纯组件，完全依赖于接收到的输入来产生输出；它是确定的，易于测试，与应用程序的其他部分非常松散地耦合；因此，鼓励高可重用性，并且易于实现

---

改变变量的数据-UI状态管理非常重要，据我迄今为止的理解，它可能是Angular 2应用程序的核心。是被动世界中的Redux，并且做得很好。通过这种方式，我们可以保持数据转换的预测性、可测试性，并且任何服务/容器组件可以根据需要随时引用数据，并可以在组件链中传递数据。

EventEmitter

仅用于

@Output（）

s位于组件中，不应用于服务或除

@Outputs（）

s以外的任何其他地方。使用

可观察的

或

主题

。另见@GünterZöchbauer：谢谢你让我知道。我已经更新了上面的示例以使用RxJS主题。我还在组件中使用了可观察的对象。然后，我升级到一个共享服务，其中包含所有数据+行为。我从未使用过observables+共享服务，因为您在共享服务中更新的任何内容都会绑定到html，比如：[routerLink]=“['/projects/'+service.id+'/campaign']”。您在哪里需要单例服务+可观察？？？其他示例：当共享服务持有一个项目列表，并且所有组件都绑定到此列表时，您只需执行项目。推送（项目）和每个组件都将立即反映该更改。不需要可观察到的。它的总开销。我还将包括，您应该使用服务，无论何时，子组件和父组件都必须对数据进行更改，或者数据生存期应该大于父组件和子组件。否则，请使用输入来提高数据流的可见性，并解耦子组件。答案很好的复制品

// mycomponent.ts
export class MyComponent {
  constructor(private myService: MyService) {
    this.myService.wat$.subscribe((value) => {
       // do something with the new value
    });
  }
}