在 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>

在发送要存储的数据后，我在我的 div 上滚动。但我不想使用setTimeout。它不必要地等待 300 毫秒。是否有任何替代方法？我只想滚动到我的div，当我的数据被发送或 ngif 条件得到满足时。

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

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

Answer 1

你可以使用 Lifecycle 钩子，AfterViewInit Angular 初始化组件的视图和子视图/指令所在的视图后响应。

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

Answer 2

假设clientSearchResults$ 在调度SetClientSearchResultsAction 时会发出一个新值，您可以在组件中订阅clientSearchResults$ 并从那里开始滚动。

ngOnInit() {
  clientSearchResults$
  .subscribe(() => {
    this.myScrollContainer.nativeElement.scrollIntoView({ behavior:'smooth', block: 'start'});
  });
}