angular - EventTarget 无法访问 classList

我试图让一个扩展面板只有在点击箭头时才展开，但是当我尝试编译它时，这个功能

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

最佳答案

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

EventTarget 实际上是 MouseEvent ， target 属性不是固定类型。您可以查看此帖子以了解有关该主题的更多信息:SO Post

由于目标元素是 span ，您可以使用 TypeScript HTMLSpanElement 类型来帮助您。

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

关于angular - EventTarget 无法访问 classList，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59501650/