Angular 为什么@ViewChild不能在ViewInit之后运行到外部？

因此，我尝试根据角度应用程序的滚动来执行一些事件

我有一个问题，因为我试图在

@ViewChild

的帮助下访问HTML中的元素

我可以访问

ngAfterViewInit（）

内部的元素，但无法访问外部的元素。它总是显示未定义的

这是我的组件类：

export class NavBarComponent implements OnInit {

  @ViewChild('navBar')
  navBar:ElementRef;

  constructor(private renderer: Renderer2) {
  }

  ngAfterViewInit(){
    window.addEventListener('scroll', this.onScroll, true);
    console.log(this.navBar.nativeElement);
  }

  ngOnInit(): void {

  }

  onScroll(){
    console.log("I am scrolling right now.")
    console.log(this.navBar.nativeElement)
  }

  onResize(){

  }

  onTabClick(){

  }
}

当我在

ngAfterViewInit（）内登录控制台时，我会得到HTML元素，但当我在
onScroll（）内登录控制台时，它是未定义的

为什么我的元素在viewinit之后消失并且没有定义？我没有使用任何
ngIf
或任何删除元素的东西

下面是组件HTML代码

  <section class="et-hero-tabs" >
    <h1>STICKY SLIDER NAV</h1>
    <h3>Sliding content with sticky tab nav</h3>
    <div class="et-hero-tabs-container" #navBar>
      <a class="et-hero-tab" href="">ES6</a>
      <a class="et-hero-tab" href="">Flexbox</a>
      <a class="et-hero-tab" href="">React</a>
      <a class="et-hero-tab" href="">Angular</a>
      <a class="et-hero-tab" href="">Other</a>
      <span class="et-hero-tab-slider"></span>
    </div>
  </section>


粘性滑块导航
使用粘性选项卡导航滑动内容

以下是控制台错误：
您可以使用方法在回调函数中绑定
这个
关键字的含义。试试下面的方法

ngAfterViewInit（）{
window.addEventListener（'scroll'，this.onScroll.bind（this），true）；
console.log（this.navBar.nativeElement）；
}

如果没有绑定，
onScroll（）
回调中的
this
关键字的作用域不会指向类的作用域。
问题在于调用
this.onScroll
的方式。要保留
this
，您可以：（1）将回调定义为箭头函数：
onScroll=（）=>{…}
，或者（2）将调用包装在箭头函数中：
window.addEventListener（'scroll'，（）=>{this.onScroll（）；}，true）。您还可以使用rxjs“fromEvent”：<代码>fromEvent（窗口，'scroll'）。订阅（res=>{…}）
这允许您取消订阅，或延迟或…我理解现在这个答案会发生什么。但是变量未定义有什么原因吗？就我而言，“导航栏”？也许我要问的是：如果定义了一次，为什么不总是定义它？当您直接传递回调时，
这个
关键字将指向函数的范围。函数中没有任何
navBar
变量。使用
bind（this）
，您可以从指向类的
ngAfterViewInit（）
函数的作用域中告诉回调函数使用
this
。哦，好的。所以我基本上是给函数提供类上下文。但是为什么我可以记录其他类变量呢？对不起，我问了一些愚蠢的问题。我理解你的意思，我只是想理解为什么访问该变量的唯一可能方法是在AfterViewInit的作用域上。如果不引用
此
，您将无法访问任何成员变量。除非变量是在函数内部定义的。