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'});
  });
}

替代Angular 2+中的setTimeout

2 个答案: