在模块内创建 childRouter，Aurelia

Question

也许这是一个愚蠢的问题。但是我们开始了，我在“主”js 文件中设置了一个带有父导航的页面。那一个有效，但在其中一个选项卡中，我显示了一个展开的表格。我展开的每一行都会加载一个像这样的模块 <detail-page></detail-page> 在那个自定义元素中，我有一个像这样的经典 ul：

<section>
            <div class="col-sm-12">
              <ul class="nav nav-tabs tabs-top">
                <li
                  repeat.for="row of router.navigation"
                  class="${row.isActive ? 'active' : ''}"
                >
                  <a href.bind="row.href">
                    <i
                      if.bind="row.config.icon"
                      class="fa fa-cog"
                      aria-hidden="true"
                    ></i>
                    <span t="${row.title}"></span>
                  </a>
                </li>
              </ul>
              <div class="panel panel-section">
                <div class="panel-body">
                  <router-view></router-view>
                </div>
              </div>
            </div>
          </section>

这段代码应该基于 routerNavigation 创建四个选项卡，没有什么新内容。

现在有个大问题，我如何在没有configureRouter(config, router) 的情况下创建 childRouter。 因为这个扩展的“module(detailPage)”没有被导航到...，configureRouter(config, router) 显然不会被调用。我试图根据 aurelia 文档创建一个这样的 childRouter：

this.router = this.parentRouter.container.createChild();

https://aurelia.io/docs/api/router/class/AppRouter/method/createChild

这并没有解决我的问题，因为下一步是创建带有路线的地图，我不知道该怎么做。

也许我把事情复杂化了，我想要的是这样的东西：

但是表格中的每一行都会有一个。 天哪，我希望我能够解释这一点。有任何问题，请告诉我！

Answer 1

很抱歉花了这么长时间才得到答案，但这里是！

首先让我们谈谈目录结构。这是我使用的一个例子，我发现它真的很有帮助。

• project_src/
  • app.html
  • app.js
  • 页数/
    • 首页/
    • home.html
    • home.js
    • 子应用/
      • child-app.js
      • child-app.html
      • 子应用页面/
        • child-app-page.js
        • child-app-page.html

app.js：

        configureRouter(config, router) {
            {
                route: '/child-app',
                name: 'child-app',
                moduleId: 'pages/home/child-app',
                title: 'Child App'
            },

子应用程序.html：

<template>
   <router-view></router-view> <!-- This should already exist -->
</template>

子应用程序.html：

<template>
   <!-- Extra fluff u want in here (Maybe that navbar you have in ur design could go here)-->
   <router-view></router-view> <!-- Your information area would be rendered here -->
</template>

child-app.js：

        configureRouter(config, router) {
            const childAppRoot = 'pages/home/child-app/';
            {
                route: ['child-app-page', ''],
                name: 'child-app-page',
                moduleId: childAppRoot + 'child-app-page/child-app-page',
                title: 'Child App Page'
            },

真的就这么简单。只是在视图模型中有一个额外的元素。只需要注入你的路由器并调用 configureRouter 内置函数并设置你的路由。