Question

我将服务注入组件。该服务是某种数据寄存器 - 所有需要的组件＆＃39;数据就在那里。

在组件中使用该服务数据是一种很好的做法吗？模板？或者我应该编写多个Observables？

示例：

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

$config

我认为很多代码都没有用。

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中为子组件和设置可观察对象提供此服务：

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函数。

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

1 个答案: