javascript - Polymer - 从父元素获取元素

Question

我有一个可以使用 firebase 登录的应用程序。我为此使用polymerfire。有一个主应用程序元素: 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 随着 firebase-auth 元素的 statusKnown 和 user 属性而变化。当 statusKnown 为 false 时，loading 页面可见。当statusKnown为true时，它选择home屏幕，当user为null时> 或用户仪表板。

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

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

如何从子项获取 auth 元素？

Answer 1

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

所以:

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

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

就是这样。