javascript - 未捕获的类型错误打开对话框

Question

我在 Polymer 2 中编码，并试图在函数运行时打开纸质对话框组件:

_boundListener(e) {
  this.error = e.detail;
  console.log(this.error);
  this.$.dialog.open();
}

我已验证 this.error 正在运行并包含正确的数据。我的模板中有一个 id 为 dialog 的纸质对话框，但是当此函数运行时，我收到以下消息:

未捕获的类型错误:无法读取未定义的属性“对话框”

有什么想法吗？时间差

此函数在事件监听器被触发时运行。这个监听器被这个函数触发:

  testError(e) {
    const err = e.detail.request.xhr.response.message;
    window.dispatchEvent(new CustomEvent('_GEtesterror', {bubbles: true, detail: err}));
  }

我不得不使用 window.dispatchEvent 来触发这个事件，因为它没有冒泡到对话框所在的 html。这可能就是它无法找到 this.$.dialog 的原因？

这是监听函数的样子:

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('_GEtesterror', this._boundListener);
  this._boundListener.bind(this);
}
disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('error', this._boundListener);
}
_boundListener(e) {
  this.error = e.detail;
  console.log(this, this.$);
  this.$.dialog.open();
}

Answer 1

你得到这个错误是因为 this.$ 是未定义的。

使用 console.log(this, this.$) 确定调用函数的范围。您的监听器被调用的范围错误。

此外，绑定(bind)您的 _boundListener 到正确的范围:

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('_GEtesterror', this._boundListener.bind(this));
}
disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('error', this._boundListener.bind(this));
}
_boundListener(e) {
  this.error = e.detail;
  console.log(this, this.$);
  this.$.dialog.open();
}