角度2-子模块路由和嵌套的< router-outlet> [英] Angular 2 - Submodule routing and nested <router-outlet>

问题描述

我正在寻找针对Angular 2的解决方案，用于以下情况：

I'm looking for a solution with Angular 2 for the scenario explained below:

在这种情况下，顶部导航包含用于加载子模块的链接，而子导航具有用于更新子模块内容的链接。

In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.

URL应映射为：

• / home =>将主页加载到主要组件路由器出口中


• / submodule =>在主组件路由器插座中加载子模块，默认情况下应显示子模块的主页，并且子导航栏


• / submodule / feature =>在子模块的内部加载功能路由器插座

应用程序模块（和应用程序组件）包含顶部导航栏，可导航到不同的子模块，并且应用程序组件模板看起来像此

The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this

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

但这是复杂性。我需要我的子模块具有类似的布局，并带有第二级导航栏和自己的路由器出口，以加载自己的组件。

But here is the complexity. I need my submodules to have similar layout with a second level nav bar and their own router outlet to load their own components.

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

我尝试了所有选项并在各处搜索，但找不到具有默认模板的解决方案（例如应用组件），并在带有路由器插座的子模块中加载子模块的内容，并在不丢失子导航的情况下在内部路由器插座中加载子模块的内容。

I tried every options and search everywhere but couldn't find a solution to have a default template (like app component) in the sub-module with router outlet and also load the contents of submodule in the inner router outlet without losing the sub-nav.

我将不胜感激或想法

推荐答案

html页面将如下所示。

The html page will look like this.

主页

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

子模块页面

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

在顶部导航栏中单击导航时，主要路线出口将分别路线。

on clicking navigation in top-nav bar the main route outlet will route respectively.

，同时单击子导航栏，路由器出口[sub]将分别路由。

while clicking on sub-navbar the router-outlet [sub] will route respectively.

HTML很好，技巧就在于编写app.routing

HTML is fine, the trick will came at writing 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
  }
]

希望它会为您提供帮助。

Hope it will help you.

更多详细信息 https://angular.io/guide/路由器

这篇关于角度2-子模块路由和嵌套的< router-outlet>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！