Obter a largura, altura e deslocamento da div clicada - Angular 2
Eu tenho um modelo que cria uma lista de links usando*ngFor
e um elemento div separado que desejo alterar sua localização com base no link ativo no momento.
Modelo:
<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>
Isso resulta em uma estrutura assim:
<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>
Quero que minha div marca-texto tenha a largura deLink 1
quandoactiveLink = 0
. Semelhante a este js simples:
var High = document.getElementById('highlighter');
High.style.width = document.getElementsByClass('div-link')[0].children[activeLink].offsetWidth; //activeLink = 0
No meuapp.component.ts
Arquivo:
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);
}
}
Quando eu registro ochildrenContent
Eu recebo umQueryList
objeto, mas está vazio, sem elementos para obter informações.
Eu tentei vários@Directive
seletores e sempre meuQueryList
está vazia.