javascript - Angular 2+ 中 setTimeout 的替代方案

Question

我正在将数据发送到 ngrx store .之后，我想滚动到特定的 div，它正在使用商店中的这些数据。

@ViewChild('datalist') private myScrollContainer: ElementRef; 

this.store.dispatch(new SetClientSearchResultsAction(filteredData));

setTimeout(() => {
this.myScrollContainer.nativeElement.scrollIntoView({ behavior:'smooth', block: 'start'});
 }, 300);

下面是 HTML div。

<div  #datalist id="mydata" *ngIf="clientSearchResults$ | async  as searchResults" 
class = 'result'>
  <p> hellooo</p>
</div>

在将数据分派(dispatch)到存储后，我在我的 div 中获得了滚动条。但我不想使用 setTimeout。它不必要地等待 300 毫秒。是否有任何替代方法来做到这一点？我只想滚动到我的 div，当我的数据被分派(dispatch)或 ngif 条件得到满足时。

下面是我从 Store 获取值的组件的构造函数。

constructor(private store: Store<AppState>,
    private formBuilder: FormBuilder, private _clientService: ClientService) {
    this.clientSearchResults$ = this.store.select('searchResults');
  }

Answer 1

可以使用Lifecycle hook，AfterViewInit在Angular初始化组件的 View 和 subview /指令所在的 View 后进行响应。

class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}