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

Question

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

app.component.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;
    }
  }
}

app.component.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，类似于此功能（在 firefox 中打开）。这是我的 current stackblitz. 我的问题是你将如何构建它？尽量不使用单例。

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

用于在 child 1 和 child2 之间进行捕捉的上述逻辑的伪代码（有关上下文，请参阅 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

您需要使用 el 访问该元素，如下所示。这是因为您在自定义组件上定义了 #child02 而不是本机元素，因此您需要通过 el.

访问它

this.child02.el.nativeElement.scrollIntoView({ behavior: 'smooth' });

我已经验证，没有更多的控制台错误。

https://stackblitz.com/edit/angular-horizontalscrollsetup-logging2-e7b9jy?file=app/app.component.ts

但是，请使用属性 # 作为最后的手段，因为它会导致您的应用程序紧密耦合。

您可以参考以下link了解更多。

https://angular.io/api/core/ElementRef

Answer 2

将@ViewChild 声明更新为：

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

保持其他一切不变。

Example

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

My template reference variable .nativeElement is undefined

typescript

angular-template

angular