angular - 我的模板引用变量 .nativeElement 未定义

Question

this.child02.nativeElement 未定义，我不明白为什么。我究竟做错了什么？谢谢你。这是我的 current stackblitz.

应用程序组件.ts:

import { Component,ElementRef,ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

switchDirection = true;
head: ElementRef;

@ViewChild('child02') child02: ElementRef;

  onScroll(event: Event) {
    console.log("viewBoundaryL:" + (event.target as HTMLElement).scrollLeft);
    if((event.target as HTMLElement).scrollLeft >= 50 && this.switchDirection === true){
  console.log("nativeElement:" + this.child02.nativeElement)
  console.log(this.child02)
  console.log('snap')
this.child02.nativeElement.scrollIntoView({ behavior: 'smooth' });
  this.switchDirection = false;
    }
  }
}

应用程序组件.html:

Keep an eye on the console while scrolling...
<div class="container"  (scroll)="onScroll($event)" >

<child1></child1>
<child2 #child02></child2>
<child3></child3>

</div>

上下文:我正在尝试制作一个 snap-to-component-directive，类似于 this functionality (open in firefox).这是我的 current stackblitz.我的问题是你将如何构建它？尽量不使用单例。

有很多方法可以做到这一点，但这里有一个:当用户从一个组件水平滚动到另一个组件以使其进入 View 超过子组件边界五十个或更多像素时，该组件将 scrollIntoView()。需要一个 switchDirection 变量，以便一旦捕捉发生，它就不会在相同的定位逻辑上运行。我想再次将其放入指令中。

用于在 child 1 和 child 2 之间进行捕捉的上述逻辑的伪代码(有关上下文，请参阅 stackblitz 控制台):

//snap from child1 to child2
    If (viewBoundary >= child1L + 50px && switchDirection === true){
child2.scrollIntoView();
switchDirection = false;
debounceTime(250);
}
//snap from child2 to child1
else if(viewBoundary <= child1R - 50px && switchDirection === false){
child1.scrollIntoView();
switchDirection = true;
debounceTime(250);
}

感谢您的见解!

Answer 1

将@ViewChild 声明更新为:

@ViewChild('child02',{read: ElementRef}) child02: ElementRef;

保持其他一切不变。

Example