Question

我在我的角度应用程序中使用element.scrollIntoView（）。

点击功能正常运行时，我可以看到所需的元素。

我的TS文件：

-- there may be a more elegant approach, but this worked for me
-- create a CTE containing the last seven dates
WITH dates AS (
  SELECT
    date_add('day', n, current_date) AS date
  FROM (
    SELECT
      ROW_NUMBER() OVER ()-7 AS n
    FROM db1.tbl1
    LIMIT 7
  )
),

-- extract the year, month, and day for joining
date_parts AS (
  SELECT
    CAST(EXTRACT(YEAR FROM date) AS VARCHAR) AS year,
    CAST(EXTRACT(MONTH FROM date) AS VARCHAR) AS month,
    CAST(EXTRACT(DAY FROM date) AS VARCHAR) AS day
  FROM dates
)

-- return all results from the last seven days
SELECT 
  * 
FROM date_parts AS dp
  JOIN db1.tbl1 AS t1 ON dp.year = t1.year AND dp.month = t1.month AND dp.day = t1.day;

在我的模板中，我使用mat-nav-list并单击，传递元素的ID并使用elem1.scrollIntoView（）或elem2.scrollIntoView（）将所需的元素显示在视图中（现在）使其可见，但理想情况下，该元素应位于顶部）。

elem1;
  elem2;

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

handleElemScroll(elem) {

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

  }

当click函数起作用时，我能够看到单击时两个元素都可以看到（scrollIntoView起作用）。但是点击行为是不可预测的。有时单击有效，并且handleElemScroll（）函数运行，而其他时间则无动作。

关于发生这种情况的任何线索吗？

Answer 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>

在此操作中，您传递了click事件。因此，在功能上您会收到单击的HTMLElement。就我而言，在我使用点击事件的任何元素上，一切都按预期工作。

Angular6：单击功能仅在某些时间有效

1 个答案: