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

Question

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

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

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

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

有什么想法吗？ TIA

此函数在事件侦听器被触发时运行。该侦听器是从此函数中触发的：

  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.$) 确定调用函数的范围。使用错误的范围调用您的侦听器。

另外，绑定您的 _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();
}