Question

尝试滚动阅读nativeElement时出现错误。尽管我实现了AfterViewInit，但NativeElement是未定义的。我还在H1中使用带参考子项的引用变量。

问题出在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>

Answer 1

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

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

也在https://stackblitz.com/edit/angular-rvwtp4:-

ngAfterViewInit() {
window.addEventListener("scroll", this.onWindowScroll, true);   // I just commented it and it is working .
}

检查一下，如有任何问题，请通知我。

Answer 2

请点击此链接

https://stackblitz.com/edit/angular6-simple-scroll

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>

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

2 个答案: