根据类名生成事件

Question

我有一个在Angular中创建的自定义组件，如下所示：

当我单击一个指示器时，绿色部分会动画显示并落在该指示器上：

我有一个新的要求，就是可以设置渲染时最初单击的值。因此，例如，您可以在某个页面的某个点进行配置，如果以后再访问同一页面，该组件将自动反映您先前的选择。

例如，一个可能名为[indicatorSelected]="'60'"的输入将生成第二张图像。

以下是控制动画的代码：

@HostListener('click', ['$event']) public onClickIndicator(event: Event) {
    const targetNode: HTMLDivElement = event.target as HTMLDivElement;
    const classList: DOMTokenList = targetNode.classList;
    if (classList.contains('indicator')) {
        const centerX: number = targetNode.offsetLeft + targetNode.offsetWidth;
        const centerXOffset: number = 10;
        this.innerShell.nativeElement.style.width = `${centerX + centerXOffset}px`;
    }
}

这是HTML标记：

<div class="shell">
  <div *ngFor="let interval of intervals; let first = first; let last = last; let i = index;"
    class="indicator"
    (click)="onClickTime(i)"
    [ngClass]="{'first': first, 'last': last}">
    <p class="seconds">{{ interval * (i + 1) }}</p>
  </div>
  <div #innerShell class="inner-shell"></div>
</div>

我想知道是否有一种方法可以利用此现有功能来生成单击事件，然后可以将其传递给此方法。

如果我获得了想要单击的指标的类名，是否可以基于该指标模拟点击？