在組件的模板中使用服務數據-這是一種好習慣嗎？

Question

我將服務注入組件。 該服務是某種數據寄存器-所有必需組件的數據都已存在。

在組件模板中使用該服務數據是否是一種好習慣？ 還是我應該寫多個Observables？

例：

<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設置可觀察的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函數。