異步管道和ngrx商店

在ngrx存儲中，當我選擇狀態，然後使用異步管道多次使用模板中的對象。這是否會損害性能？異步管道和ngrx商店

這是我使用的代碼：

構造：

this.tabs = this.store.select(s => { return s.lobby.lobbyTabs});

模板：

<div *ngIf="(tabs | async) && (tabs | async).length >0 && (tabs | async)[tabIndex].TabPositions && (tabs | async)[tabIndex].TabPositions.length > 0 && (tabs | async)[tabIndex].themeId ==1"> 

<div *ngFor="let i of createNumArray((tabs | async)[tabIndex].TabPositions.length)" class="column"> 
       <app-ticket [ticket]='rooms[(tabs | async)[tabIndex].TabPositions[i-1].Id]' [themeId]='(tabs | async)[tabIndex].themeId' 
       [lastLobbyTimestamp]='(lastLobbyTimestamp | async)'></app-ticket> 
      </div>

有沒有更好的方式與異步管工作？

來源

2017-01-23 Haniel Bitton

有幾個異步是好的，他們是非常高性能。但是，通過將邏輯放入選擇器中，您可以消除多個異步調用。

而是隻選擇標籤數據，然後把邏輯在ngIf的，將所有的邏輯放到一個選擇：

this.showAppTickets = this.store 
    .select(state => state.lobby.lobbyTabs) 
    .map(tabs => { 
     return tabs && tabs.length && tabs[tabIndex] && 
     tabs[tabIndex].tabPositions && 
     tabs[tabIndex].tabPositions.length > 0 && 
     tabs[tabIndex].themeId === 1})

，使您在您的模板使用較少的異步操作：

<div *ngIf='showAppTickets | async'>

你可以用你的ngFor的源代碼來做同樣的事情。我通常將我的集合映射到中間對象，所以我只在ngFor中使用異步管道，而不是在循環中的組件的輸入中使用異步管道。

<div *ngFor='let item of items | async'> 
    <app-ticket 
     [ticket]='item.ticket' 
     [themeId]='item.themeId' 
     [lastLobbyTimestamp]='item.lastTimeStamp'> 
    </app-ticket> 
</div>

如果你在你的組件類，正確使用選擇/ rxjs運營商，你只需要在你的模板2個異步管道。這使您的模板更容易閱讀，更高性能，更可測試

來源

2017-01-24 16:49:47 adharris

異步管道和ngrx商店

回答

相關問題