在组件的模板中使用服务数据 - 这是一个好习惯吗？

Question

我将服务注入组件。该服务是某种数据寄存器——所有需要的组件数据都在那里。

在组件的模板中使用该服务数据是一种好习惯吗？还是我应该写多个 Observable？

示例：

<my-comp [page]="myService.page" [pageSize]="myService.pageSize"></my-comp>

组件始终绑定到特定服务，不应在其他地方使用。

编辑：另一种方法是在服务中定义新的主题并在组件中订阅它们：

page = new Subject<number>();pageSize = new Subject<number>();

ngOnInit() {
    this.page=this.myService.page.subscribe(page=>this.page=page);
    this.pageSize=this.myService.pageSize.subscribe(pageSize=>this.pageSize=pageSize);
}

我认为有很多不需要的代码。

Answer 1

这是主观的，但这是从性能的角度来看的。你现在使用的方式会生成如下updateDirectives函数：

function (_ck, _v) {
    var _co = _v.component;
    var currVal_0 = _co.myService.page;
    var currVal_1 = _co.myService.pageSize;
    ...
    _ck(_v, 1, 0, currVal_0, currVal_1, ...);
},

如您所见，每个更改检测周期都会查询这些值。更高效的方法是向子组件提供此服务并在 ngOnInit 中设置 observables：

class MyComp {
    const cancelSubscription = new Subject();
    ngOnInit() {
       this.service.page.takeUntil(cancelSubscription).subscribe((v)=>this.page=v)
       this.service.pageSize.takeUntil(cancelSubscription).subscribe((v)=>this.pageSize=v)
       ...
    }

    ngOnDestroy() {
       this.cancelSubscription.next();
       this.cancelSubscription.complete();

这样编译器生成的函数会是这样的：

function (_ck, _v) {
    var _co = _v.component;
    var currVal_0 = _co.myService;
    _ck(_v, 1, 0, currVal_0);
},

这将仅通过参考执行一次快速比较。

更好的方法是使用 DI。在父组件中定义一个服务，注入到MyComp：

@Component({providers:[Service]})
class ParentComponent
    constructor(private s: Service) {}
    ...
    s.page.next(3)

class MyComp {
    constructor(private s: Service) {}

    ngOnInit() {
      ...

所以组件会这样使用：

<my-comp></my-comp>

这样udpateDirectives函数就不会被编译器生成了。