Angular material 角度6：单击功能仅在部分时间有效

我正在angular应用程序中使用element.scrollIntoView（）

当我的点击功能工作时，我会看到所需的元素

我的TS文件：

elem1;
  elem2;

  ngOnInit() {
    this.elem1 = document.getElementById('elem1');
    this.elem2 = document.getElementById('elem2')
  }

handleElemScroll(elem) {

    // elem.scrollTop = 1000;
    elem.scrollIntoView({behavior: 'smooth', block: 'end'});

  }

在我的模板中，我使用mat nav list，单击，传递元素的id，并使用elem1.scrollIntoView（）或elem2.scrollIntoView（）将所需元素带入视图（目前，将其带入视图，但理想情况下，元素应位于顶部）

转到elem1
去elem2

当click功能工作时，我可以看到这两个元素在单击时进入视图（scrollIntoView工作）。但是，点击行为是不可预测的。有时单击有效，HandleLemScroll（）函数运行，有时则不执行任何操作。

---

关于为什么会发生这种情况，有什么线索吗？

好的，正如我之前告诉过你的，看看这个代码（在我的例子中是角度6，但它必须从2开始工作）：

和html：

<div id="el1" (click)="clickEvent($event.target)">Element 1</div>
<div id="el2" (click)="clickEvent($event.target)">Element 2</div>

元素1
要素2

---

在此操作中，您将传递click事件。所以在函数中，您将收到您单击的HTMLElement。在我的情况下，在我使用click event的任何元件上都能正常工作。

我不是舒尔，我完全理解这个问题，而是像HandleLemScroll（$event）一样使用HandleLemScroll（click event）。然后从事件中同步获取一个目标并滚动到它。单击并不是每次单击时都触发，单击发生时滚动事件工作正常。

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

 @Component({
 selector: 'eas-requests',
 templateUrl: './requests.component.html',
 styleUrls: ['./requests.component.css']
 })
 export class RequestsComponent implements OnInit {

 // No need to declare
 el1:HTMLElement;
 el2:HTMLElement;
 constructor() { }

 ngOnInit() {
   //No need to declare
   this.el1 = document.getElementById('el1');
   this.el2 = document.getElementById('el2');
 }

 // Just declare this method and receive html element.
 clickEvent(e:HTMLElement){
    e.scrollIntoView({behavior: 'smooth', block: 'end'});
 }
}

<div id="el1" (click)="clickEvent($event.target)">Element 1</div>
<div id="el2" (click)="clickEvent($event.target)">Element 2</div>