Polymer

Question

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

<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 使用 parent 指针 this.parentElement.$.auth.signInWithPopup()

如何从 child 中获取 auth 元素？

Answer 1

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

访问 firebase-auth

所以：

at my-home 元素当你准备好调用 firebase auth 时，只需调用类似的东西：this.fire("logIn"); 并在 ready 函数内的父元素中写这个：

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

就是这样。

Polymer - 从 parent 中获取一个元素

Polymer - get an element from parent

javascript

polymer-2.x