Получить ширину, высоту и смещение нажатой div - Angular 2

У меня есть шаблон, который создает список ссылок, используя *ngFor и отдельный элемент div, который я хочу изменить в своем местоположении на основе текущей активной ссылки.

Шаблон:

<div #divHandle
    *ngFor="let link of links; let i = index"
    class="div-link"
    (click)="changeActiveLink(i)">
    <h2>{{link}}</h2>
</div>
<div
[@indexState]="activeLink"
id="highlighter"></div>

Это приводит к такой структуре:

<div class="div-link">
  <div (click)="changeActiveLink(0)"><h2>Link 1</h2></div>
  <div (click)="changeActiveLink(1)"><h2>Link 2</h2></div>
  <div (click)="changeActiveLink(2)"><h2>Longer link 1</h2></div>
  <div (click)="changeActiveLink(3)"><h2>Longer link 2</h2></div>
</div>
<div id="highlighter"></div>

Я хочу, чтобы моя подсветка div, чтобы получить ширину Link 1 когда activeLink = 0, Подобно этой простой JS:

var High = document.getElementById('highlighter');
High.style.width = document.getElementsByClass('div-link')[0].children[activeLink].offsetWidth; //activeLink = 0

В моем app.component.ts файл:

import { Component, AfterViewInit, ViewChildren, Directive, QueryList, ElementRef} from '@angular/core';

@Directive({selector: '[class~=div-link]'})
@Directive({selector: '.div-link'}) // variant
@Directive({selector: '#divHandle'}) // variant
@Directive({selector: '[divHandle]'}) // variant
export class ChildDirective {
    constructor(elem: ElementRef){}
}

@Component({
    selector: 'my-app',
    ...
})
export class AppComponent implements AfterViewInit {
    @ViewChildren(ChildDirective) childrenContent: QueryList<ChildDirective>;

    ngAfterViewInit(){
        console.log(this.childrenContent);
    }
}

Когда я регистрирую childrenContent Я получаю QueryList объект, но он пуст, нет элементов для получения информации.

Я пробовал несколько @Directive селекторы и всегда мои QueryList пустой.

Источник

2 ответа

Решение

Вы можете использовать свойство $event для обработки ширины, высоты, смещения и так далее. Используя этот метод, в игру вступает традиционный javascript, как показано ниже

HTML-код будет как

<div *ngFor="let link of links;" class="div-link" 
             height="100px"
             width="30px"
             (click)="changeActiveLink($event)">
          <h2>{{link}}</h2>
</div>
<div height="height" width="width" id="highlighter">some text</div>

Обработка выбранного элемента сверху элемента div как

changeActiveLink(value){
    this.height=value.srcElement.parentElement.attributes['height'].value;
    this.width=value.srcElement.parentElement.attributes['width'].value;
    console.log(this.width);
    console.log(this.height); 
  }

Примечание. В приведенном выше примере событие click находится на букве, поэтому мы получим srcElement как h2 поэтому я использую parentElement. В реальном времени вы можете справиться с этим любым способом, имеющим условие if внутри метода.

Вы также можете console.log щелкнуть элемент и получить больше идей для достижения этой цели.

LIVE DEMO

Источник

Вы можете поместить ручку на элемент, с которым хотите поиграть..

<div #handle ..>

затем в вашем классе компонентов вы можете получить доступ к компоненту с помощью аннотации @ViewChild.

Тогда в вашем ngOnViewInit вы можете сделать..

ngOnViewInit() {
  viewChildEl.offsetLeft = 100;
}

Должен указать вам в правильном направлении.

Источник
Другие вопросы по тегам