Angular 视图滚动上未定义角度nativeElement

尝试读取滚动条上的nativeElement时出错。NativeElement未定义，尽管我实现了AfterViewInit。我也在我的H1中使用了一个引用变量，用于viewchild

问题出在myDiv viewchild上。另外，在我的模板中，我添加了引用变量。 这是我在控制台中遇到的错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined
at onWindowScroll (nav.component.ts:52)

TS文件

export class NavComponent implements OnInit , AfterViewInit{
@ViewChild("stickyMenu", { static: true }) menuElement: ElementRef;
// test
@ViewChild("myDiv", {static: false}) divView: ElementRef;

showDiv: boolean = false;
constructor(private el: ElementRef,
private scrollDispatcher: ScrollDispatcher) { }

ngOnInit() {
  window.addEventListener("scroll", this.onWindowScroll, true);
}

ngAfterViewInit() {
this.scrollDispatcher
  .ancestorScrolled(this.el)
  .subscribe(event => this.onWindowScroll());
  // This logs ABOUT
  console.log(this.divView.nativeElement.innerHTML);
}
@HostListener('mouseenter')
onMouseEnter() {
console.log('entered');
this.showDiv = true;
}

 @HostListener("window:scroll", ['$event'])
 onWindowScroll() {
 const windowScroll = window.pageYOffset;
 console.log(windowScroll); // is always 0
 // this throws an error: Cannot read property 'nativeElement' of undefined
 this.divView.nativeElement.innerHTML = "Hello Angular 8!";
 }
}

模板

  <section class="et-slide" id="about">
<h1 class="header" #myDiv>ABOUT</h1>
<div class="row">
  <div
    *ngIf="showDiv"
    #stickyMenu
    [@explainerAnim]
    class="col-sm-12 text-center about-page"
    (mouseenter)="onMouseEnter()"
  >
    <div class="card">
      <div class="developer-photo mt-4"></div>
      <div class="card-body">
        <h2>Who`s this guy?</h2>
        <p>
          ggggggg <br />
          gggggggggg.
        </p>
      </div>
    </div>
    <div class="card developer-details ">
      <div class="card-header developer-header mt-4">
        <h2>ggggggggg</h2>
        <h5>Full-Stack Developer</h5>
      </div>
      <div class="card-body">
        <p>
          ggggggggg.
        </p>
        <table class="table table-borderless">
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">EMAIL</th>
              <td>ggggggggg</td>
            </tr>
            <tr>
              <th scope="row">PHONE</th>
              <td>ggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</section>

关于
这家伙是谁？

ggggggg

gggggggg。

gggggggg
全堆栈开发程序

gggggggg。

电子邮件
gggggggg
电话
ggggg

请点击此链接

TS文件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  @ViewChild('scrollDiv') scrollElement: ElementRef;

  name = 'Angular 6 scroll to top test';
  arr: any[];

  constructor(
    rendrer2: Renderer2,
  ) {

  }

  public ngOnInit(): void {
    this.arr = Array(1024).fill('X');
  }

  public handleScrollToTopClick(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    console.log(this.scrollElement);
    console.log(this.scrollElement.nativeElement);
    this.scrollElement.nativeElement.scrollTo(0, 0);
  }
}

<h1>{{ name }}</h1>
<hr/>
<div #scrollDiv class="scroll-me">
  <ul>
    <li *ngFor="let el of arr">
      {{el}}
    </li>
  </ul>
  <a href="#" (click)="handleScrollToTopClick($event)">Scroll to top</a>
</div>

模板文件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  @ViewChild('scrollDiv') scrollElement: ElementRef;

  name = 'Angular 6 scroll to top test';
  arr: any[];

  constructor(
    rendrer2: Renderer2,
  ) {

  }

  public ngOnInit(): void {
    this.arr = Array(1024).fill('X');
  }

  public handleScrollToTopClick(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    console.log(this.scrollElement);
    console.log(this.scrollElement.nativeElement);
    this.scrollElement.nativeElement.scrollTo(0, 0);
  }
}

<h1>{{ name }}</h1>
<hr/>
<div #scrollDiv class="scroll-me">
  <ul>
    <li *ngFor="let el of arr">
      {{el}}
    </li>
  </ul>
  <a href="#" (click)="handleScrollToTopClick($event)">Scroll to top</a>
</div>

{{name}



{{el}}

如果已经为window:scroll定义了@HostListener，为什么要添加事件侦听器

Remove window.addEventListener("scroll", this.onWindowScroll, true); from ngOnInit (from your question) 

也在

---

如果有任何问题，请检查并通知我。

您是否也尝试在

ngAfterViewInit

中注册该事件？@MoxxiManagarm我所做的一切我都已将其放在代码中。我不知道你所说的“注册事件”是什么意思，我指的是这一行：

window.addEventListener（“scroll”，this.onWindowScroll，true）

，尝试将其移动到

ngAfterViewInit

它完全相同。错误依然存在…我不明白这里出了什么问题。你能为同样的问题创建一个stackblitz吗？这是一个好主意…但这与我在这里做的事情无关。。。