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
• 由于目标元素是 a span，您可以使用 TypeScriptHTMLSpanElement类型来帮助您。

这是 imo 提出的替代答案的更清晰的解决方案：

  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) );
  }