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

Question

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

它会更好,以这些变量发送到每个子组件,孙子组件,...等,或只是拨打服务在我的组件来获得这些变量,当我需要他们？

Answer 1

当您具有父子孙子方案时,将使用@Input API.如果您有路由和兄弟组件,@ Input API将无法帮助您.如果你想进行双向沟通,你必须在父母和孩子中进行管理.后来,随着时间的推移,管理变得复杂.

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

所以,据我所知,共享服务是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是Reux世界中的Redux并且做得很好.通过这种方式,我们可以保持数据转换的可预测性,可测试性,并且可以根据需要随时通过任何服务/容器组件返回数据,并且可以在组件链中传递.