首页 文章

Angular6：click函数只在某些时候有效

提问于
浏览 次
0

我在我的角应用程序中使用了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>

当click函数工作时，我能够看到两个元素在点击时进入视图（scrollIntoView工作） . 但 the click behavior is unpredictable. Sometimes the click works and the handleElemScroll() function runs, others time it does nothing.

有关为何发生这种情况的任何线索？

angular-material angular6 angular-components angular-template

1 回答

  • 0

    好吧，正如我在看到这段代码之前告诉你的那样（在我的情况下是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>

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

    回复于

相关问题