Angular2 +異步管道：從單一Observale

獲取多個值我有一個服務，它返回一個單一可觀察。現在我正在尋找正確的/最有效的方式從這個Observable獲得多個結果而不用編寫太多的代碼。Angular2 +異步管道：從單一Observale

MyService返回Observable<Array<Foo>>
MyComponent呼叫myService.getFoos()和應該輸出從陣列的第一5個元素，並且陣列的總長度，以及未示出的元件的數量。

這裏是我當前的代碼：

@Injectable() 
export class MyService { 
    foos = new BehaviorSubject<Array<Foo>>([]); 

    getFoos() { 
    return this.foos.asObservable(); 
    } 
} 



@Component({ 
    template: ` 
    Total: {{ totalCount | async }} 
    Omitted: {{ (totalCount | async) - (maxFiveItems | async).length }} 
    <div *ngFor="let item of maxFiveItems | async"> 
     {{item.bar}} 
    </div> 
    ` 
}) 
export class MyComponent { 
    totalCount: Observable<number>; 
    maxFiveItems: Observable<Array<Foo>>; 

    constructor(myService:MyService) { 
    this.totalCount = myService.getFoos() 
     .map(arr => arr.length); 

    this.maxFiveItems = myService.getFoos() 
     .map(arr => arr.slice(0, 5)); 
    } 
}

結果看起來不錯，但我使用的是async管的4倍。哪些（據我所知）將導致4個訂閱。這不應該在所有需要我猜（？）

當然，我可以的MyComponent的constructor中手動訂閱，然後生活在沒有async管道。但是，我必須照顧自己取消訂閱。

是否有任何其他的方式來處理呢？

來源

2017-01-16 Benjamin M

你在做什麼沒什麼錯，假設myService.getFoos()裏面的某個地方使用share()運營商，所以你所有的async管道共享相同的訂閱源。如果你在這個例子中使用BehaviorSubject，那麼你很好。

你提到什麼在構造函數中訂閱自己是什麼，立刻來到了我的腦海裏。雖然我沒有看到手動取消訂閱的問題。

來源

2017-01-16 10:37:55 martin

我不understang爲什麼你應該使用'share'在'BehaviorSubject'。關於退訂，如果手動訂閱的東西，可以發出一個以上的值（這是行爲主體的情況下），那麼你需要退訂。否則你會得到內存泄漏。基本上你會在你的組件中實現'OnDestroy'接口。 – Melou

從這個公寓，我同意你的看法：@Benjamin的做法似乎非常好。 – Melou

我剛剛看了一下在角4即將到來的特點：** ngIf與異步管道，讓**（見：https://netbasal.com/a-taste-from-angular-version-4-50be1c4f3550）。這可以解決其中一些多訂閱情況。 –

Angular2 +異步管道：從單一Observale

回答

相關問題