Не удается запросить выбор тени Root при нажатии кнопки (для переключения вида) - PullRequest
Новая
       12

Не удается запросить выбор тени Root при нажатии кнопки (для переключения вида)

1 голос
/ 27 февраля 2020

У меня есть родительский компонент ha-config-user-picker.js и дочерний компонент edit-user-view.js.

Родительский компонент: имеет отображение пользователей, а также тег дочернего компонента со своими подпорками. событие click получает тень Root дочернего компонента и вызывает метод 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");. Таким образом, всплывающее окно возвращает ноль.

Но если я снова нажму на любого пользователя. он получает тень Root и работает нормально.

Вопрос: Так почему же он нулевой в первый раз и работает после этого? и как мне это решить? Может ли это быть проблемой? https://github.com/Polymer/polymer/issues/5144

Дайте мне знать, если вам нужно что-то большее, чтобы понять. :)

1 Ответ

0 голосов
/ 09 марта 2020

Метод toggleView не выполняется в контексте вашего дочернего компонента, вы можете попробовать console.log(this) перед использованием this, и вы увидите, что это не элемент.

Вы можете попробовать что-то вроде замены: 

el.toggleView();

на 

el.toggleView.call(el);

, чтобы увидеть, если это проблема, и если да, то рефакторинг вашего кода, если вы считаете нужным. Обратите внимание, что я не проверял это в данный момент, поэтому могут быть небольшие различия.

...