javascript - Polymer - 从父级获取一个元素

Question

我有一个可以使用 firebase 登录的应用程序。我正在为此使用 polymerfire。有一个主要的应用程序元素:my-app 有这些 child :

<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 或用户 dashboard。

  _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()

我怎样才能从 child 那里得到 auth 元素？

Answer 1

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

所以:

在 my-home 元素中，当您准备调用 firebase 身份验证时，只需调用类似:this.fire("logIn"); 并在 parent-elemet 中在 ready 函数中这样写:

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

就是这样。