EventTarget 无法访问 classList答案

【问题标题】：EventTarget is not able to access classListEventTarget 无法访问 classList
【发布时间】：2020-04-17 11:27:03
【问题描述】：

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

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

【问题讨论】：

能否请您展示您模板的相关部分？
没有。这个东西正在stackblitz上工作，但它不能在本地编译......

标签： angular angular-material

【解决方案1】：

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

【讨论】：

事实上，我比现在更喜欢你的方法......我想我会去的！谢谢！
@gothaf 我也认为这更合适，IMO 您应该从我的答案中删除已接受并将此答案标记为已接受。赞成这个答案。
好吧@Plochie.. 只是因为你这么说... :)
谢谢你们！！感谢您的帮助！

【解决方案2】：

您需要将'EventTarget'类型转换为Element，更改函数如下，

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

【讨论】：