Angular 2 ngrx 可观察值

Question

在我的商店中，我有 isLoading: 布尔值，它是 false 并在对服务器的请求启动时更改为 true，在响应或出错后更改回 false。我 select 它在容器 class 中并作为属性传递给组件，如下所示：

@Component({
  template: `<some-component [isLoading]="isLoading"></some-component>`
})

class SomeContainer() {
  private isLoading: Observable<boolean>;
  constructor(private store: Store<IStore>) {
    this.isLoading = store.select(isLoadingSelector);
  }
}

而且我想将它用于一些有条件的内容：

class SomeComponent {
  @Input() private isLoading: Observable<boolean>;
  ...
}

<div>
  <span *ngIf="isLoading">Loading</span>
  <span *ngIf="!isLoading">Some data</span>
</div>

但是 isLoading 是 Observable 的，我必须为这个逻辑的预期工作获取布尔值。我找到的解决方案是像这样在 class 中获取价值：

private ngOnInit():void {
  this.isLoading.subscribe((value) => this.isLoadingBoolean = value);
}

并在模板中使用 isLoadingBoolean。

但这看起来很棘手。有没有更好的方法来解决这个问题（也许是将 async 管道与 *ngIf 一起使用的方法）？

Answer 1

您可以在 SomeContainer:

中使用 async 管道

@Component({
  template: `<some-component [isLoading]="isLoading | async"></some-component>`
})
class SomeContainer() {
  private isLoading: Observable<boolean>;
  constructor(private store: Store<IStore>) {
    this.isLoading = store.select(isLoadingSelector);
  }
}

并且您的 SomeComponent 可以简化为使用 boolean 输入：

@Component({
  template: `
    <div>
      <span *ngIf="isLoading">Loading</span>
      <span *ngIf="!isLoading">Some data</span>
    </div>
  `
})
class SomeComponent {
  @Input() private isLoading: boolean;
  ...
}

通常，处理容器中的可观察对象是个好主意，这样组件就可以 'dumb' - 请参阅 "Presentational and Container Components"。

Angular 2 ngrx 可观察值

Angular 2 ngrx Observable value

observable

ngrx

angular