для класса.

я есть шаблон, который создает список ссылок, используя*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 пустой.