@ViewChildren доступ к каждому дочернему методу в Angular с использованием директивы

Question

Я использую Angular 8 .

У меня есть AnalyticsWrapper, включающий разные дочерние компоненты для отображения разных аналитических данных.

Пример:

<div class="parent-wrapper">
  <app-analytics-location analyticsDirective></app-analytics-location>

  <app-analytics-device analyticsDirective></app-analytics-device>
</div>

В файле component.ts я использую ViewChildren(), чтобы получить список компонентов дочерней диаграммы

@ViewChildren(AnalyticsDirective) analticsDirective !: QueryList<AnaltyicsDirective>;

Нет, каждый дочерний компонент, app-analytics-location, app-analytics-device имеет метод getData(), который возвращает данные, используемые для аналитики при вызове.

Я хочу вызвать этот метод для каждого дочернего элемента и сохранить данные в массиве, например

const d = [];
this.analyticsDirective.forEach(child => {
  d.push(child.getData());
});

Но это дает ошибку как getData() не определено в AnalyticsDirective.

AnalyticsDirective

@Directive({
  selector: '[appAnalyticsChart]'
})
export class AnalyticsChartDirective {

  constructor() { }

}

Я могу вызвать тот же метод, используя @ViewChild

Как я могу вызвать дочерний метод, используя @ViewChildren различных компонентов?