Создать событие на основе имени класса - PullRequest
Новая
       5

Создать событие на основе имени класса

0 голосов
/ 11 сентября 2018

У меня есть пользовательский компонент, который я создал в Angular, который выглядит следующим образом:

enter image description here

Когда я нажимаю на один из индикаторов, зеленыйчасть анимируется и попадает на указанный индикатор:

enter image description here

У меня есть новое требование, чтобы я мог установить значение, на которое изначально было нажато во времярендеринг.Так, например, вы настраиваете это в какой-то момент, на какой-то странице, и если вы снова зайдете на ту же страницу позже, компонент автоматически отразит ваш предыдущий выбор.

Например, вход, возможно, с именем [indicatorSelected]="'60'", который сгенерирует второе изображение.

Вот код, управляющий анимацией: 

@HostListener('click', ['$event']) public onClickIndicator(event: Event) {
    const targetNode: HTMLDivElement = event.target as HTMLDivElement;
    const classList: DOMTokenList = targetNode.classList;
    if (classList.contains('indicator')) {
        const centerX: number = targetNode.offsetLeft + targetNode.offsetWidth;
        const centerXOffset: number = 10;
        this.innerShell.nativeElement.style.width = `${centerX + centerXOffset}px`;
    }
}

Вот HTML-разметка: 

<div class="shell">
  <div *ngFor="let interval of intervals; let first = first; let last = last; let i = index;"
    class="indicator"
    (click)="onClickTime(i)"
    [ngClass]="{'first': first, 'last': last}">
    <p class="seconds">{{ interval * (i + 1) }}</p>
  </div>
  <div #innerShell class="inner-shell"></div>
</div>

Яинтересно, есть ли способ использовать эту существующую функциональность для генерации события щелчка, которое я затем могу передать этому методу.

Если я получу имя класса индикатора, который я хочу щелкнуть, могу ли ясимулировать клик на основе этого?

...