ngAfterViewInit 不起作用或者我做错了什么

Question

我的 ngAfterViewInit 函数未按预期工作。我感觉我在这里错过了一些东西。

  ngOnInit() {
   this.dataService.getUsers().subscribe((users) => {this.users = users) ;  
  }

  ngAfterViewInit() {
    if (document.getElementById('target')) {
        document.getElementById('target').scrollIntoView({
          behavior: 'auto',
          block: 'center',
          inline: 'center',
       });
   }

所以基本上，在视图完成加载后，我使用ngAfterViewInint()函数滚动到当前项目。在里面ngOnInit()，如果我不打电话subscribe()，只是在那里放一个变量。它工作得很好。但我所问的情况并非如此。

setTimeOut()我通过使用inside解决了这个问题ngAfterViewInit()。但我不喜欢它。我不喜欢它依赖于超时这一事实。我认为会有更好的解决方案。有理想吗？谢谢大家。

Answer 1

更好的解决方案是使用ViewChildren装饰器，因为您可以订阅视图的更改，这意味着您不需要使用setTimeOut

  @ViewChildren("target") target: QueryList<ElementRef>;

  ngOnInit() {
   this.dataService.getUsers().subscribe((users) => {this.users = users) ;  
  }

  ngAfterViewInit() {
    this.target.changes.subscribe(({ first: elm }) => {

      elm.nativeElement.scrollIntoView({
        behavior: "auto",
        block: "center",
        inline: "center"
      });

    });
  }

堆栈闪电战演示

Answer 2

看来您的代码取决于您在调用dataService.getUsers()之前返回的调用ngAfterViewInit()？

如果是这样，那是行不通的，因为无法保证时间。相反，请执行以下操作：

 ngAfterViewInit() {
   this.dataService.getUsers().subscribe((users) => {
      this.users = users;
      this.scrollTargetIntoView();
   )};
 }

  scrollTargetIntoView() {
    if (document.getElementById('target')) {
        document.getElementById('target').scrollIntoView({
          behavior: 'auto',
          block: 'center',
          inline: 'center',
       });
   }

即使这可能有点太早了 - 你可能想添加一个 setTimeout() 给 DOM 一个渲染的机会，例如：

ngAfterViewInit() {
   this.dataService.getUsers().subscribe((users) => {
      this.users = users;
      setTimeout(() => this.scrollTargetIntoView());
   )};
 }

  scrollTargetIntoView() {
    if (document.getElementById('target')) {
        document.getElementById('target').scrollIntoView({
          behavior: 'auto',
          block: 'center',
          inline: 'center',
       });
   }