Angular6：点击功能仅在某些时候有效

Posted 2023-03-13

【中文标题】Angular6：点击功能仅在某些时候有效

【英文标题】：Angular6: click function only works some of the time

【发布时间】：2018-12-11 00:45:28

【问题描述】：

我在我的 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() 将所需的元素显示在视图中（现在将其纳入视野，但理想情况下该元素应位于顶部）。

<div class="new-side-nav">
  <mat-nav-list>
    <a mat-list-item>
    <span (click)="handleElemScroll(elem1)">Go to elem1</span>
    </a>
    <a mat-list-item>
    <span (click)="handleElemScroll(elem2)">Go to elem2</span>
    </a>
  </mat-nav-list>
</div>

当点击功能起作用时，我可以看到两个元素都在点击时出现（scrollIntoView 起作用）。但是点击行为是不可预测的。有时点击有效并且 handleElemScroll() 函数运行，有时它什么也不做。

关于为什么会发生这种情况的任何线索？

【问题讨论】：

我不确定我是否完全理解问题，而是像 handleElemScroll($event) 一样放入 handleElemScroll(CLICK EVENT)。然后从事件中获取一个目标并滚动到它。

每次点击都不会触发 on click，当点击发生时滚动事件可以正常工作。

【参考方案1】：

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

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');
 

还有html：

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

在此操作中，您传递点击事件。因此，在功能中，您会收到您点击的 HTMLElement。在我的情况下，在我使用点击事件的任何元素上都可以正常工作。