Angular 2 ngrx Observable value

Question

在我的商店中，我有isLoading：布尔值，当服务器的请求开始并且在respose之后或错误时它变回false时，它是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是可观察的，我必须得这个逻辑的预期工作的布尔值。我找到了解决办法是越来越值类是这样的：

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

，并在模板中使用isLoadingBoolean。

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

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

通常情况下，这是对付一个好主意与容器中的可观察物体一起使得组件可以是'哑'的 - 参见"Presentational and Container Components"。