2016-08-17 81 views
0

我對Aurelia相當陌生,我試圖瞭解訪問和顯示子路由器子頁面中數據的最佳方式。數據存儲在子路由器視圖模型的activate方法中。我的問題是當我第一次進入或重新加載子路由器的子頁面時顯示數據。不幸的是它不工作。只要我已經顯示一個子頁面,並轉到另一個,它一切正常。Aurelia:如何訪問存儲在子路由器視圖模型中的數據

兒童router.js

export class ChildRouter { 
    configureRouter(config, router) { 
     config.title = 'Child Router Title'; 
     config.map([ 
      { route: '', redirect: 'basics'}, 
      { route: ['basics', ''], name: 'basics', moduleId: './basics/basics',  nav: true, title: 'Basics' }, 
      { route: 'data',   name: 'data',  moduleId: './data/data',   nav: true, title: 'Data' } 
     ]); 
     this.router = router; 
    } 
    activate() { 
     this.var1 = "Var1. Only works when I reenter a subpage."; 
     this.var2 = "Var2. Only works when I reenter a subpage."; 
    } 
} 

兒童router.html

<template> 
    <require from="../components/detail-navigation.html"></require> 
    <h2>${router.title}</h2> 
    <detail-navigation router.bind="router"></detail-navigation> 
    <div class="page-host"> 
    <router-view></router-view> 
    </div> 
</template> 

basics.html

<template> 
    <h2>Basics Title</h2> 
    <h3>${var1}</h3> 
</template> 

data.html

<template> 
    <h2>Data Title</h2> 
    <h3>${var2}</h3> 
</template> 

我希望你能理解我的問題。

Here is a link to a test projekt on git.

我期待着任何建議。

+0

'ChildRouter'是一個普通的頁面右邊,有一個視圖和一個視圖模型?你想在你的'ChildRouter'視圖中顯示數據,還是你想要顯示路由器將呈現的頁面中的數據? – Randy

+0

是的。 ChildRouter是一個普通頁面。我想在路由器將使用路由器視圖呈現的頁面(basics.html和data.html)中顯示數據。 –

回答

1

個人而言,我真的建議你不要嘗試這樣做。這引入了ChildRouter頁面與顯示爲路由的任何頁面之間的緊密耦合。如果您需要這些頁面進行對話,請考慮使用依賴注入提供程序將相同類的實例注入到每個頁面中,並以此方式共享信息。

+0

謝謝你的幫助Ashley。它依賴注入很好地工作。 –

相關問題