Angular 4 Init儿童组件输入

Question

我的父组件html包含此行以调用默认值maxprice的子组件：

<app-filter-events [maxPrice]='_maxPrice'></app-filter-events>

parent组件在实例化子组件之前通过调用API来获取MaxPrice，这是代码：

constructor(private _dataService: DataService) {
 this._dataService.getEventsByCriteria(this._filterCriteria).subscribe(res => this._maxPrice = res);
}

问题在于，MaxPrice在儿童组件中不确定。我想问题来自对API的异步电话，但我不知道解决它。

谢谢

编辑：我的问题是，如果MaxPrice不确定，而是在实例化子组件之前设置了MaxPrice，则不要隐藏子组件。

Answer 1

这很简单，在调用呼叫并将其设置为true之后，将变量设置为false。完成之前，您不希望将组件加载到DOM中。

<div *ngIf="maxPriceBoolean">
  <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</div>

Answer 2

您无法在_maxPrice时实例化app-filter-event组件仍然不确定：

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

Answer 3

只需使用 *ngIf：

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

或

<ng-container *ngIf="_maxPrice">
   <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</ng-container>

Answer 4

constructor在 @Input()之前执行，因此绑定输入值在构造函数块中不确定，使您的组件在ininit和access @input(( ngOnInit()中的actect @input((varible中可以使用，它可以随时使用。。

Answer 5

使用async管道：

<app-filter-events [maxPrice]='_maxPrice$ | async'></app-filter-events>

组件代码

    _maxPrice$: Observable<number>;
   constructor(private _dataService: DataService) {
     this._maxPrice$ = this._dataService.getEventsByCriteria(this._filterCriteria)
    }