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

我希望避免在此组件中使用.subscribe（）。 我尝试了

*ngIf=“user$| async as user”

，但没有成功

如何使用

user$| async

unorder使局部变量在此视图中的不同位置使用它？

---

更新

正如@yurzui所指出的，只有在引入变量

user

的引用位于引入该变量的

元素中时，这才有效。 否则，变量将不在范围内（如下面的代码示例所示）

原创

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

在Angular4中，您可以使用

有关注释中提到的
as
语法，请参见



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

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 });
   }
}

@指令（{选择器：'[ngAsync]}）
导出类同步{
构造函数（私有vcRef:ViewContainerRef，私有templateRef:templateRef）{}
@输入（）
设置同步（变量：任意）{
这个.vcRef.clear（）；
this.vcreateEmbeddedView（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>

在考虑了不同主张的利弊之后，如果这里只用于获取用户流，我将使用一个
ParentComponent
事件。
谢谢大家。
事实上我也试过了，但没用。那我再试一次。什么角度版本？4.0.0。但是我尝试了
user$| async作为user
而不是
user$|async；让用户
。我认为
让用户
在
*ngIf
中有作用域，所以我想我唯一的其他可能性是在
父组件
中查询用户并将其交给这个。看起来很不错。我要试试看。谢谢@yurzui。主要缺点是在更新
user
后销毁所有元素。是的，你是对的。然后我将继续使用父组件。但我会遵守这个指令。它是有用的。