Question

我有以下模板

<div *ngIf="hotels$ | async as hotels; else loadGif ">
   <div *ngFor="let hotel of hotels | hotelsFilter: _filteredType; first as f; index as i " 
    appInit [hotel]="hotel " [first]="f ">
    <app-card appHighlight [hotel]=hotel></app-card>
   </div>
</div>

编写appInit指令以识别列表过滤后酒店列表的第一个元素。这是appInit指令的ngInit方法：

  constructor(
        private __hotelsService: HotelsService
      ) { }

      @Input()
      public hotel: Hotel;
      @Input()
      public first: boolean;

      public ngOnInit(): void {
        if (this.first) {
          this.__hotelsService.selectedHotel$.next(this.hotel);
          console.log('first init ' + this.hotel.name);
        }else{
          console.log('not first init ' + this.hotel.name);
        }

      }

问题在于，每次过滤和重新呈现酒店列表时，都不会调用该指令的ngOnInit方法。问题是为什么以及何时应该调用ngOnInit？

Answer 1

ngOnInit 仅在初始化组件时调用一次。根据您的需要，您应该使用 ngOnChanges ，当输入属性发生变化时，将会调用 ngOnChanges 。

有关生命周期钩子的更多信息：https://angular.io/guide/lifecycle-hooks

什么时候调用ngOnInit方法？

1 个答案: