Aurelia：如何访问存储在子路由器视图模型中的数据

我对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.

我期待着任何建议。

来源

2016-08-17 Daniel Hübschmann

'ChildRouter'是一个普通的页面右边，有一个视图和一个视图模型？你想在你的'ChildRouter'视图中显示数据，还是你想要显示路由器将呈现的页面中的数据？ – Randy

是的。 ChildRouter是一个普通页面。我想在路由器将使用路由器视图呈现的页面（basics.html和data.html）中显示数据。 –

个人而言，我真的建议你不要尝试这样做。这引入了ChildRouter页面与显示为路由的任何页面之间的紧密耦合。如果您需要这些页面进行对话，请考虑使用依赖注入提供程序将相同类的实例注入到每个页面中，并以此方式共享信息。

来源

2016-08-17 17:00:17

谢谢你的帮助Ashley。它依赖注入很好地工作。 –

Aurelia：如何访问存储在子路由器视图模型中的数据

回答

相关问题