Question

鉴于index.html（my-app）中包含iron-pages的根组件，以及其中一个或多个网页内的iron-ajax调用，最佳方法是什么？ iron-ajax on-response在子组件中运行，告诉my-app更改路线？我使用的是Polymer 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。当iron-ajax调用中的my-login完成后，我想将my-login替换为my-todos。到目前为止，我已经提出了两种方法（见下文）。两者都有效 - 更改页面和更新URL - 但必须更好吗？是否有一种我找不到的清洁方法？

iron-ajax

中的my-login响应时处理程序

_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很简单，但涉及直接进入父，我的应用程序。

选项＃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);
}

选项＃2感觉更好，但我想知道它是否是我能做的最干净。

Answer 1

建议您通过数据绑定将routeData传递到<my-login>，并在routeData.page = "my-todos"

中设置_handleLogin()

Answer 2

我在app-location文档中找到了第三种方式（我认为我会使用的方式）：＆＃34; app-location在{{1}上触发location-changed事件当它更新位置＆＃34;。所以，

window

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

2 个答案: