javascript - 无法在按钮单击时查询选择影子根(用于切换 View )

Question

我有一个父组件ha-config-user-picker.js和子组件edit-user-view.js .

父组件: 具有用户映射，并且还具有子组件标签及其 Prop 。 点击事件获取子组件的shadowRoot并调用方法toggleView .

<template is="dom-repeat" items="[[users]]" as="user">
    <paper-button on-click="clickEditUser">
      <paper-item>
        ...
      </paper-item>
    </paper-button>
  </template>

  <edit-user-view hass="[[hass]]" user="[[user]]"></edit-user-view>

  clickEditUser(ev) {
    this.user = ev.model.user;
    const el = this.shadowRoot.querySelector("edit-user-view");
    el.toggleView();
  }

子组件:

<fullscreen-pop-up>
   <dialog-header title="Edit User"></dialog-header>
   <div class="content">
     ...
   </div>
</fullscreen-pop-up>

toggleView = () => {
    const popup = this.shadowRoot.querySelector("fullscreen-pop-up");
    const dialog = popup.shadowRoot.querySelector("paper-dialog");
    dialog.toggle();
}

错误: 因此，当我单击映射的用户时。首先我收到错误 Uncaught TypeError: Cannot read property 'shadowRoot' of null 。这是 const popup = this.shadowRoot.querySelector("fullscreen-pop-up"); 。所以弹出窗口返回 null。

但是如果我再次点击任何用户。它获取了 ShadowRoot 并且工作正常。

问题:那么为什么它第一次为 null 而之后又有效呢？ 我该如何解决这个问题？ 这可能是问题所在吗？ https://github.com/Polymer/polymer/issues/5144

如果您需要了解更多内容，请告诉我。 :)

Answer 1

toggleView 方法不会在子组件的上下文中执行，您可以在使用 this 之前尝试 console.log(this) > 你会发现它不是元素。

您可以尝试诸如替换之类的操作:

el.toggleView();

与

el.toggleView.call(el);

看看这是否是问题所在，如果是，请按照您认为合适的方式重构您的代码。请注意，我目前尚未对此进行测试，因此可能存在细微差异。