角度2 ngrx可观测值

Question

在我的商店里，我有一个名为“加载：布尔值”的值，它是假的，当对服务器的请求开始时，它变成了真，在重置或出错后，它又变成了假的。我在容器类中选择它，并将其作为属性传递给组件，如下所示：

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

但是isLoding是可观察的，我必须得到这个逻辑的预期工作的布尔值。我找到的解决方案是在课堂上获得价值，就像这样：

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

并在模板中使用isLoadingBoolean。

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

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

并且您的某物组件可以简化为使用布尔值输入：

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

通常，处理容器中的可观察对象是一个好主意，这样组件就可以“哑”——请参见“表示和容器组件”。