Angular 2 - подмодуль маршрутизации и вложенный <router-outlet>


82

Я ищу решение с Angular 2 для сценария, описанного ниже:

введите описание изображения здесь

В этом сценарии верхняя навигация содержит ссылки для загрузки подмодулей, а суб-навигация содержит ссылки для обновления содержимого подмодуля.

URL-адреса должны отображаться как:

  • / home => загружает домашнюю страницу в розетку основного компонента маршрутизатора
  • / submodule => загружает подмодуль в выход маршрутизатора основного компонента и по умолчанию должен отображать домашнюю страницу подмодуля и вспомогательную панель навигации
  • / submodule / feature => загружает функцию внутри выхода маршрутизатора подмодуля

Модуль приложения (и компонент приложения) содержит верхнюю панель навигации для перехода к различным подмодулям, а шаблон компонента приложения может выглядеть следующим образом

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Но вот в чем сложность. Мне нужно, чтобы мои подмодули имели аналогичную компоновку с навигационной панелью второго уровня и собственным выходом маршрутизатора для загрузки собственных компонентов.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

Я пробовал все варианты и искал везде, но не смог найти решение, чтобы иметь шаблон по умолчанию (например, компонент приложения) в подмодуле с выходом маршрутизатора, а также загружать содержимое подмодуля во внутреннюю розетку маршрутизатора без потери суб-навигатора .

Буду признателен за любой вклад или идеи


Так что же именно происходит с текущей настройкой?
micronyks

1
при текущей настройке я не могу использовать внутреннюю розетку маршрутизатора. Маршрутизация загружает даже компоненты субмодулей в главную розетку маршрутизатора, и все мои шаблоны компонентов субмодулей должны иметь включенную суб-навигатор
Рон Ф.

1
Вы нашли решение для вложенного роутера-розетки без потери суб-навигации? Я столкнулся с аналогичной проблемой.
Saurav

2
Да, я думаю, что столкнулся с тем же, <sub-navbar> просто не отображается, только то, что выходит из маршрутизатора.
louisvno

Здесь можно найти пример многоуровневого RouterOutlet и RouterModules Angular 8 freakyjolly.com/…
Code Spy

Ответы:


54

Страница html будет выглядеть так.

Главная страница

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Страница подмодуля

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

при нажатии на навигацию в верхней панели навигации основной выход маршрута будет направлен соответственно.

при нажатии на суб-навигационную панель маршрутизатор-выход [суб] будет маршрутизировать соответственно.

HTML в порядке, уловка будет в написании app.routing

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

Надеюсь, это поможет тебе.

Подробнее https://angular.io/guide/router


1
Да, ваш html str был правильным. Основная игра - app.routing.ts. Я дважды делал подобные приложения.
Aswin KV

1
Спасибо за ответ. Я пробовал подобную маршрутизацию, но меня не понимает, куда должен идти выход этого субмодуля? в основном модуле ясно, что выход маршрутизатора должен быть в шаблоне app.component, но у нас нет такой же концепции компонента приложения для подмодулей. так где же розетка маршрутизатора "под"?
Ron F

Также как должен выглядеть routerLink на вспомогательной панели навигации?
Рон Ф

3
Ссылка на маршрутизатор должна быть строкой, если вы добавите '/' в начале строки, она заменит текущий маршрут, если вы не добавите '/', ссылка маршрута будет добавлена ​​с текущим маршрутом. Тем не менее, вам непонятно, пожалуйста, создайте образец приложения на какой-нибудь онлайн-платформе для программирования и поделитесь ссылкой
Aswin KV

2
Я не совсем уверен в этом, но вложенную router-outletдирективу не нужно называть. Вот пример: github.com/gothinkster/angular-realworld-example-app/blob/…
Джесс

21

Использование:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Полный пример:

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

1
В какой версии и далее поддерживается этот маршрут имени. Bcoz Я пытаюсь использовать v6, но он не работает.
Суджай ООН

1
Это не работает в текущей версии angular.
After_Sunset

0

вы должны указать название розетки в маршрутах, упомянуть название розетки вашего маршрутизатора в маршрутизации, например, "розетка: 'sub"

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];

этот фрагмент кода возвращает ошибку: "Uncaught ReferenceError: LoginComponent не определен"
Umpa
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.