子要素からアプリルートの場所を変更する方法

Question

私はアプリルートベースのプロジェクトを作成しました。特定のイベント私は別のルートにルートを変更する必要があります。

index.htmlを

<my-app></my-app> 

私-app.html

<!-- this app-route manages the top-level routes --> 
<app-route 
    route="{{route}}" 
    pattern="/:view" 
    data="{{routeData}}" 
    tail="{{subroute}}"></app-route> 

<!-- iron-pages selects the view based on the active route --> 
<iron-pages selected="[[routeData.view]]" attr-for-selected="name"> 
    <landing-app name="home" route="{{subroute}}"></landing-app> 
    <dashboard-app name="dashboard" route="{{subroute}}"></dashboard-app> 
</iron-pages> 

着陸-app.html

ハンドラは、私はへのルートを変更する必要が呼び出されたときダッシュボード。どうやってするか ？

<dom-module id="landing-app"> 
    <template> 
    <button on-click="_handlerCall">Change to Dashboard</button> 
    </template> 
    <script> 
    class LandingApp extends Polymer.Element { 

     static get is() {return 'landing-app'} 

     _handlerCall() { 
     this.set('route.path', '/dashboard') // but no luck :(
     } 
    } 
    customElements.define(LandingApp.is, LandingApp); 
    </script> 
</dom-module> 

Answer 1

追加： 着陸-app.html

で <template>後 <app-location route="{{route}}"></app-location>

<dom-module id="landing-app"> 
    <template> 
    <app-location route="{{route}}"></app-location> 
    <button on-click="_handlerCall"> Change to Dashboard</button> 
    </template> 
    <script> 
    class LandingApp extends Polymer.Element { 

     static get is() {return 'landing-app'} 

     _handlerCall() { 
     this.set('route.path', '/dashboard') // :) 
     } 
    } 
    customElements.define(LandingApp.is, LandingApp); 
    </script> 
</dom-module> 

app-locationのドキュメント： https://www.webcomponents.org/element/PolymerElements/app-route/elements/app-location