javascript - 如何从 Web 组件 mixin 中删除事件监听器 --> 类型 'disconnectedCallback' 上不存在属性 'HTMLElement'

Question

我正在为 Web 组件构建一个 TypeScript mixin 以添加拖动行为。到目前为止，一切都进展顺利。但是，在可拖动 Web 组件断开连接后尝试删除事件监听器时，我遇到了一个难题。

drag.ts - 向 HTMLElements 添加拖动行为

type Constructor = new (...args: any[]) => HTMLElement

export function Drag<BC extends Constructor>(BaseClass: BC) {

    return class Drag extends BaseClass {

        constructor(...args: any[]) {
            super(...args)

            // Somehow I need to remove this listener when the component is disconnected
            document.addEventListener(UPDATE_ACTIVE_DRAG_SET, this.handleToggleDrag)
        }

        disconnectedCallback() {

            // This mehods must be implemented by a web component
            // Not all web components that will receive the drag behavior 
            // will ahve a disconnectedCallback defined
            // So typescript must be right when it gives an error
            super.disconnectedCallback()

            // These work just fine (HTMLElement implements them)
            super.innerHTML
            super.querySelector('div')
        }

        // ...more stuff here
    }
}

ma​​in-menu.ts - 拖动行为的可能候选者

export class MainMenu extends HTMLElement{
    // ... implementation of the web component

    // <!> It is very likely that not all components will implement this
    disconnectedCallback() {} 
}

window.customElements.define('main-menu', DragAndDropLayout(MainMenu))

到目前为止我唯一的想法是猴子修补 HTMLElement 以包含一个虚拟 disconnectedCallback 以便 super.disconnectedCallback 不会提示此错误:Property “HTMLElement”类型中不存在“disconnectedCallback”。我还没试过。有没有更好的方法来解决这个问题？

Answer 1

你的 mixin 可以测试父类(super class)中是否存在方法:

disconnectedCallback() {
  if (super.disconnectedCallback) {
    super.disconnectedCallback();
  }
  // Do mixin work here.
}

这个 Elix 项目大量使用了 mixin，在其 composition rules for mixin methods and properties 中探讨了这个主题。 .

我们成功地将这种方法与 TypeScript 结合使用。请注意，也可以为您的 mixin 创建 TypeScript 定义文件，以便 TypeScript 知道使用您的 mixin 的组件可以使用哪些 mixin 方法/属性。我们当前对 Mixin 泛型类型的定义位于 https://github.com/elix/elix/blob/master/src/shared.d.ts .