Настраиваемое событие не попадает в директиву

Question

Angular 9, я пытаюсь создать настраиваемое событие, и директива запускает его logi c при получении события. Однако я не могу получить директиву для перехвата события.

Есть идеи, что не так?

Примечание: я не использую анимацию Angular, потому что d3 строит свои элементы и не работает с анимацией Angular.

Файл last-seven-days-chart.component.html и файл last-seven-days-chart.component.ts

<div class="chart-body" staggerAnimation>
  <div *ngFor="let chart of charts | async | daysFilter:7" class="last-seven-days-body">
      <line-chart
        class="hide-chart"
        [curve-data]="chart"
        graph-size="med"></line-chart>
  </div>
</div>

export class LastSevenDaysChartComponent implements OnInit {
  public charts;
  @Output() chartsReady = new EventEmitter();

 ....

  ngOnInit(): void {
    this.charts = this.getChartDataService.getData();
    this.charts.subscribe({
      complete: () => {
        // setTimeout to give time for d3 to create graphs
        setTimeout(() => this.chartsReady.emit(), 50);
      },
    });
  }

stagger-animation.directive.ts

import {
  Directive,
  ElementRef,
  HostListener,
} from '@angular/core';

@Directive({
  selector: '[staggerAnimation]'
})
export class StaggerAnimationDirective {

  constructor(
    private el: ElementRef,
  ) { }

  staggerGraphs(): void {
    const chartElements = this.el.nativeElement.querySelectorAll('line-chart');
    chartElements.forEach((el, i) => {
      setTimeout(() => { el.classList.add('show-chart') }, (i * 120) );
    });
  }

  @HostListener('chartsReady', ['$event.target'])
  onChartsReady() {
    console.log('aaa'); // never get this console log
    this.staggerGraphs();
  }

}

Answer 1

Так что я не думаю, что это хорошее использование директивы и эмиттера событий, но вот как вы все равно могли бы этого добиться

component. html

<div class="chart-body" staggerAnimation [chartsReady]="chartsReady">...</div>

component.ts

export class LastSevenDaysChartComponent implements OnInit, AfterViewInit  {
  public charts;
  public chartsReady = new EventEmitter();
  ...
    ngAfterViewInit() { // <-- note the lifecycle hook change
        this.charts.subscribe({
          complete: () => {
            // setTimeout to give time for d3 to create graphs
            setTimeout(() => this.chartsReady.emit(), 50);
          }
        });
      }
}

stagger-animation.directive.ts

export class StaggerAnimationDirective implements OnChanges, OnDestroy {
  @Input() chartsReady: EventEmitter<any>;
  ...
  ngOnChanges() {
       this.chartsReady.subscribe(this.staggerGraphs);
     }
  ngOnDestoroy() {
    this.chartsReady.unsubscribe();
  }
  ...
}