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>

上下文：我正在尝试制作一个类似于this functionality (open in firefox).的指向组件的指令，这是我的current stackblitz. 我的问题是您将如何构建？尝试不使用单例。

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

用于在子1和子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

Answer 2

您需要使用el来访问元素，如下所示。这是由于您在非本地元素的自定义组件上定义了#child02，因此您需要通过el访问它。

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

我已经验证，并且不再有控制台错误。

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

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

您可以参考以下链接以了解更多信息。

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

我的模板参考变量.nativeElement未定义

2 个答案: