angular - EventTarget 无法访问 classList

Question

我试图让扩展面板仅在点击箭头时展开，但是当我尝试编译它时，此功能

private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return (target.classList && target.classList.contains(expansionIndicatorClass) );
  } 

返回以下错误:

"Property 'classList' does not exist on type 'EventTarget'"

有什么线索可以帮助我解决此错误吗？或者您是否知道任何其他解决方法来实现相同的功能？

我让它在 stackblitz 上正常工作，没有错误...... https://stackblitz.com/edit/basic-material-e6sh1r

Answer 1

使用 console.log({event}); 和 console.log({target});，您可以看到以下内容:

• EventTarget 实际上是 MouseEvent，而 target 属性不是固定类型。您可以查看这篇文章以了解有关该主题的更多信息:SO Post
• 由于目标元素是 span，因此您可以通过 TypeScript 使用 HTMLSpanElement 类型来帮助您实现这一点。

这是我认为作为替代答案提出的更清晰的解决方案:

  expandPanel(matExpansionPanel: any, event: MouseEvent) {
    console.log({event});

    if (!this._isExpansionIndicator(event.target as HTMLSpanElement)) {
      matExpansionPanel.close();
    }
  }

   private _isExpansionIndicator(target: HTMLSpanElement): boolean {
    console.log({target});
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return (target.classList && target.classList.contains(expansionIndicatorClass) );
  }