Question

如果我将服务传递到我的main.ts，我可以在任何地方访问它，而无需在我的子组件中调用新的提供程序。在那项服务中，我有变化的变量。

将这些变量发送到每个子组件，孙组件，..或者只是调用组件中的服务以在需要时获取这些变量会更好吗？

Answer 1

当您拥有父子孙子方案时，将使用

@Input API 。当您拥有路由和兄弟组件时， @Input API 对您无处不在。如果您想进行双向沟通，则必须在父和子中进行管理。后来，随着时间的推移，管理变得复杂。

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

所以，我认为共享服务是 Rxjs 库的一个很好的解决方案。您可以通过将其注入bootstrap函数来创建服务单例。

Answer 2

@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());
  }
}

然后依赖该服务的组件可以订阅并执行。

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

Answer 3

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

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

更改变量数据 - UI状态管理至关重要，可能是Angular 2应用程序的核心，直到我理解为止。 ngrx/store是Reactive世界中的Redux并且做得很好。通过这种方式，我们可以保持数据转换的可预测性，可测试性，并且可以根据需要随时通过任何服务/容器组件返回数据，并且可以在组件链中传递。

哪个是更好的做法，拥有共享服务与带有多个组件的@Input数据？

3 个答案: