Question

我想避免在此组件中使用.subscribe（）。我试过了*ngIf="user$ | async as user"，但它没有用。

如何制作一个user$ | async的本地变量，以便在此视图中的不同位置使用它？

<app-xpbar *ngIf="user$ | async"></app-xpbar>

<header class="header">

  <app-header-common
    (onSearch)="searching($event)">
  </app-header-common>

  <app-header-user
    [user]="user$ | async"
    (onLogin)="login($event)"
    (onTrial)="trial($event)">
  </app-header-user>

</header>

Answer 1

<强>更新

正如@yurzui所指出的，这只有在引入变量user的引用位于引入它的<pp-xpbar>元素内时才有效。否则变量将不在范围内（如下面的代码示例中所示）

<强>原始

在Angular4中，您可以使用

<app-xpbar *ngIf="user$ | async; let user"></app-xpbar>

<header class="header">

  <app-header-common
    (onSearch)="searching($event)">
  </app-header-common>

  <app-header-user
    [user]="user"
    (onLogin)="login($event)"
    (onTrial)="trial($event)">
  </app-header-user>

</header>

另见

对于评论中提到的as语法，请参阅

https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc4-2017-03-17

Answer 2

您可以尝试创建结构指令，如：

<强> NG-async.directive.ts

@Directive({ selector: '[ngAsync]' })
export class NgAsync {
   constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

   @Input()
   set ngAsync(variable: any) {
      this.vcRef.clear();
      this.vcRef.createEmbeddedView(this.templateRef, { $implicit: variable });
   }
}

然后你可以按照以下方式使用它

<强> view.html

<ng-container *ngAsync="user$ | async; let user">
  <app-xpbar *ngIf="user"></app-xpbar>

  <header class="header">

    <app-header-common
      (onSearch)="searching($event)">
    </app-header-common>

    <app-header-user
      [user]="user"
      (onLogin)="login($event)"
      (onTrial)="trial($event)">
    </app-header-user>

  </header>
</ng-container>

Answer 3

在考虑了不同命题的优缺点之后，如果只是为了获取用户流，我会选择ParentComponent事件。谢谢大家。

如何避免2次|在这种情况下异步（4.0.0）？

3 个答案: