Question

在我的商店中，我有isLoading：boolean值为false，当对服务器的请求启动时以及在respose之后或者在出错时将其更改回false时更改为true。我在容器类中选择它并传递给组件作为属性，如下所示：

@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，我必须获得该逻辑的预期工作的布尔值。我找到的解决方案是在课堂上获得这样的价值：

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

并在模板中使用isLoadingBoolean。

但它看起来很棘手。有没有更好的方法来解决这个问题（可能是使用* {1}}管道与* ngIf？

Answer 1

您可以在async：

中使用SomeContainer管道

@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;
  ...
}

通常情况下，处理容器中的observable是个好主意，这样组件可能会“哑” - 请参阅"Presentational and Container Components"。

Angular 2 ngrx可观察值

1 个答案: