异步管道和ngrx存储[重复]答案

【问题标题】：Async Pipe and ngrx store [duplicate]异步管道和ngrx存储[重复]
【发布时间】：2017-06-07 22:23:53
【问题描述】：

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

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

【问题讨论】：

标签： angular rxjs ngrx

【解决方案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})

这可以让您在模板中使用更少的异步：

<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 运算符，则模板中只需要两个异步管道。这使您的模板更易于阅读、更高效且更可测试

【讨论】：

重要的是要注意showAppTickets 不会从存储中获取任何更新，除非您重新运行该本地可观察的函数集。相反，你会得到 showAppTickets 一个吸气剂：get showAppTickets() { return this.store.pipe(select(......)); }