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

Question

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

子路由器.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.";
    }
}

子路由器.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>

数据.html

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

希望你能理解我的问题。

Here is a link to a test projekt on git.

我期待任何建议。

Answer 1

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