时间戳

首页 > 解决方案 > 在模块内创建 childRouter，Aurelia

aurelia - 在模块内创建 childRouter，Aurelia

问题描述

也许这是一个愚蠢的问题。但是我们开始了，我在“主”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). 因为这个扩展的“模块（detailPage）”没有导航到......，所以configureRouter(config, router)显然永远不会调用。我试图根据 aurelia 文档创建一个这样的 childRouter：

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

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

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

Mabey 我把事情复杂化了，我想要的只是这样的事情： 在此处输入图像描述

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

标签： aurelia

解决方案

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

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

  • 项目_src/
    • 应用程序.html
    • 应用程序.js
    • 页数/
      • 家/
      • 主页.html
      • 主页.js
      • 子应用/
        • 子app.js
        • 子app.html
        • 子应用页面/
          • 子应用页面.js
          • child-app-page.html

应用程序.js：

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

子app.html：

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

子app.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>

子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 内置函数并设置你的路由。

推荐阅读