angular - 将两个异步订阅放在一个 Angular *ngIf 语句中

Question

我的组件模板中有以下内容：

<div *ngIf="user$ | async as user>...</div>

在上面div我想使用异步管道只订阅另一个 observable 一次，并像user上面一样在整个模板中使用它。因此，例如，这样的事情是否可能：

<ng-template *ngIf="language$ | async as language>
<div *ngIf=" user$ | async as user>
  <p>All template code that would use both {{user}} and {{language}} would go in between</p>
  </div>
</ng-template>

或者甚至可以将其组合在一个语句中？

Answer 1

您可以使用对象作为变量：

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>

Plunker 示例

也可以看看

• 如何在Angular2的模板中声明变量

Answer 2

使用“对象作为变量”的问题在于它与问题中的代码没有相同的行为（加上它是对 *ngIf 的轻度滥用，使其始终评估为真）。要获得所需的行为，您需要：

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
   <ng-container *ngIf="userLanguage.language && userLanguage.user"> 
      <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
   </ng-container>
</div>

Answer 3

尽管其他解决方案有效，但它们略微滥用了ngIf仅应选择性地呈现模板的目的。我写了一个ngxInit指令，即使表达式结果是“假的”，它也总是呈现。

<div *ngxInit="{ language: language$ | async, user: user$ | async } as userLanguage">
   <!-- content -->
</div>

见https://github.com/amitport/ngx-init