Создайте childRouter внутри модуля, Aurelia - PullRequest
Новая
       36

Создайте childRouter внутри модуля, Aurelia

1 голос
/ 03 апреля 2020

Мейби, это глупый вопрос. Но здесь у нас go, у меня есть одна страница с родительской навигацией, которая настроена в «основном» файле js. Это работает, но на одной из вкладок я показываю таблицу, которая расширяется. Каждая раскрываемая строка загружает модуль, подобный этому <detail-page></detail-page>. В этом пользовательском элементе у меня есть класс c 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, ничего нового там нет.

Теперь большой вопрос, как мне создать childRouter без configureRouter(config, router). Поскольку этот расширенный «модуль (detailPage)» не перемещается в ..., configureRouter(config, router) никогда не вызывается, очевидно. Я пытался создать childRouter, как это в соответствии с документацией aurelia: 

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

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

Это не решает мою проблему, потому что следующим шагом является создать карту с маршрутами, я не могу понять, как это сделать.

Маби, я слишком усложняю вещи, все, что я хочу, это что-то вроде этого: enter image description here

Но для каждой строки таблицы будет по одному. Я надеюсь, что смог это объяснить. Любой вопрос, пожалуйста, дайте мне знать!

1 Ответ

3 голосов
/ 07 апреля 2020

Извините, что потребовалось так много времени, чтобы получить ответ, но вот он!

Сначала давайте поговорим о структуре каталогов. Вот пример того, что я использую, и которое я нашел действительно полезным.

  • project_src /
    • приложение. html
    • приложение. js
    • страницы /
      • home /
      • home. html
      • home. js
      • child-app /
        • child-app. js
        • child-app. html
        • child-app-page /
          • 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'
            },

child-app . html: 

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

child-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>

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 и настроить маршруты.

...