Question

我是Aurelia的新手，我正在努力了解在子路由器的子页面中访问和显示数据的最佳方式。数据存储在子路由器视图模型的activate方法中。我的问题是在我第一次进入或重新加载子路由器的子页面时显示数据。不幸的是它不起作用。一旦我显示了一个子页面并转到另一个页面，它一切正常。

儿童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.

我期待着任何建议。

Answer 1

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

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

1 个答案: