Angular6: функция щелчка работает только иногда - PullRequest
Новая
       29

Angular6: функция щелчка работает только иногда

0 голосов
/ 02 июля 2018

Я использую 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 и по щелчку, передавая идентификатор элемента и используя 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 (), в других случаях ничего не происходит.

Есть какие-нибудь подсказки, почему это происходит?

1 Ответ

0 голосов
/ 03 июля 2018

Хорошо, как я уже говорил, посмотрите на этот код (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, что вы нажимаете. В моем случае все работает нормально, как и ожидалось на любом элементе, где я использую событие click.

...