Как (и возможно ли это) использовать ViewChildren INSIDE в структурной директиве (Angular 10)

Question

Моя директива:

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

@Directive({
  selector: '[appLinks]',
})
export class LinksDirective implements AfterViewInit {

  constructor(
    private el: ElementRef,
  ) { }

  @Input() defaultColor: string;
  @Input('myHighlight') highlightColor: string;

  @ViewChildren('appLinks', { read: ElementRef }) appLinks: QueryList<ElementRef>;

  @HostListener('click') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
    console.log('=>[ classLinksDirective//QueryList ]', this.appLinks.first);
  }

  private highlight(color: string) {
    console.log('=>[ class LinksDirective//highlight ]', color);
    this.el.nativeElement.style.backgroundColor = color;
  }
  public ngAfterViewInit() {
    console.log('=>[ classLinksDirective//QueryList ]', this.appLinks.first);
  }
}

Я хочу, чтобы что-то было в моем console.log в AfterViewInit, но ничего не приходит.

Директива объявлена ​​в appModule, и функция выделения работает. Целевое поведение - установить для всех ссылок другой цвет, а затем увидеть цвет, следующий за активной ссылкой.

мой HTML:

      <div class="intro-direct-links">
      <span  appLinks (click)="slideScreenDirectLink(0)">page0</span>
      <span  appLinks (click)="slideScreenDirectLink(1)">page1</span>
      <span  appLinks (click)="slideScreenDirectLink(2)">page2</span>
      <span  appLinks (click)="slideScreenDirectLink(3)">page3</span>
    </div>

Спасибо за помощь