Question

我有一个将使用firebase登录的应用。我正在使用聚合物火。有一个主应用元素：my-app有这些孩子：

<firebase-app
    auth-domain="my-app-ID.firebaseapp.com"
    database-url="https://my-app-ID.firebaseio.com"
    api-key="my-app-apikey">
</firebase-app>
<firebase-auth
    id="auth"
    user="{{user}}"
    status-known="{{statusKnown}}"
    provider="google"
    on-error="handleError">
</firebase-auth>

<iron-pages selected="{{page}}" attr-for-selected="name">
    <my-loading name="loading"></my-loading>
    <my-home name="home"></my-home>
    <my-dashboard name="dashboard"></my-dashboard>
</iron-pages>

page使用statusKnown元素的user和firebase-auth属性进行了更改。虽然statusKnown为false，但loading页面可见。当statusKnown为true时，它会选择home屏幕，user为null或用户dashboard。

  _signInChanged(statusKnown) {
      if(this.statusKnown) {
          if(this.user) {
              this.page = "dashboard"
          } else {
              this.page = "home"
          }
      } else {
          this.page = "loading"
      }
  }

home屏幕上有一个登录按钮，然后点击它就必须调用firebase-auth函数signInWithPopup()。但无法从firebase-auth元素访问my-home元素。使用document.getElementByID无法找到它或作为属性传递。或者以某种方式访问父指针this.parentElement.$.auth.signInWithPopup()

如何从孩子那里获得auth元素？

Answer 1

你可以采用不同的方式。感谢事件和监听器，您将能够将一些事件传播到父级，然后在parent-element中使用this.$.auth访问firebase-auth。

所以：

在my-home元素，当您准备调用firebase auth时，只需调用somethind，如：this.fire("logIn");，并在ready函数内的parent-elemet中写下：

this.addEventListener("logIn", function() {
  this.$.auth.signInWithPopup();
}.bind(this));

就是这样。

聚合物 - 从父

1 个答案: