Question

在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>

有没有更好的方法来使用异步管道？

Answer 1

有几个异步可以，它们非常高效。但是，您可以通过将逻辑放在选择器中来消除其中的几个异步调用。

不是只选择标签数据然后将逻辑放在你的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})

这可以让你在模板中使用更少的asyncs：

<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>

如果适当地在组件类中使用selectors / rxjs运算符，则模板中只需要两个异步管道。这使您的模板更易于阅读，性能更高，更易于测试

Async Pipe和ngrx存储

1 个答案: