如何从<iron-ajax>回调中路由

Question

给定index.html (my-app)中包含iron-pages的根组件，以及其中一个或多个页面中的iron-ajax调用，子组件中的iron-ajax on-response函数通知my-app更改路由的最佳方式是什么？我使用的是聚合物2。我看到的例子依赖于不同组件中的链接，并且在同一组件中调用，但没有从一个组件到其父组件的iron-ajax。

在my-app.html中，我有一个app-location和app-route，以及iron-pages

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}"></app-route>

<app-toolbar>...

<iron-pages role="main" selected="[[routeData.page]]" 
    attr-for-selected="name" selected-attribute="visible" 
    fallback-selection="404">
  <my-login name="" route="[[subroute]]"></my-login>
  <my-todos name="my-todos" route="[[subroute]]"></my-todos>
  ...
  <my-404-warning name="404"></my-404-warning>
</iron-pages>

用户首先看到的是my-login。当my-login中的iron-ajax调用完成时，我想用my-todos替换my-login。到目前为止，我已经提出了两种方法(见下文)。这两种方法都有效--更改页面和更新URL--但其中一种一定更好吗？有没有我找不到的更干净的方法？

my-login中的iron-ajax响应处理程序

_handleLogin(e) {
  if (e.detail.response) {
    let loginInfo = e.detail.response;
    if (loginInfo.o_error) {
      console.log('login error: '+loginInfo.o_error);
      // ...
    } else {
      this.dispatch('login', loginInfo); // to polymer-redux store

      // UPDATE PATH, OPTION #1
      var page = this.ownerDocument.body.children[0];
      page.set('route.path', 'server-catalog');

      // UPDATE PATH, OPTION #2
      this.dispatchEvent(new CustomEvent('change-route', {
         bubbles: true, composed: true, detail: "my-todos" }));

      // UPDATE PATH, OPTION #3..n
      ???
    }
  } else {
    console.log(e.detail);
  }
}

这两个选项都会触发观察者_routePageChanged(routeData.page)，这样魔术就会继续。

选项#1很简单，但涉及到直接访问父应用程序my-app。

选项#2依赖于my-app的两个附加功能

ready() {
  super.ready();
  // Custom elements polyfill safe way to indicate an element has been upgraded.
  this.removeAttribute('unresolved');
  // listen for custom events
  this.addEventListener('change-route', (e)=>this._onChangeRoute(e));
}

_onChangeRoute(e) {
  this.set('route.path', e.detail);
}

第二种选择感觉更好，但我想知道这是不是我能做的最干净的选择。

Answer 1

建议通过数据绑定将routeData传入<my-login>，并在_handleLogin()中设置routeData.page = "my-todos"

Answer 2

我在app-location文档中找到了第三种方法(我想我会使用它)："app-location在更新位置时在window上触发一个location-changed事件“。所以,

window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));