Angular 2，RC5 路由器插座在另一个路由器插座内 [英] Angular 2, RC5 router-outlet inside another router-outlet

问题描述

我正在尝试制作一个项目，其中一个路由器插座位于另一个路由器插座中:

I'm trying to make one project with one router-outlet inside another router-outlet:

它将像这样工作:

在第一个路由器插座中，它将有两个视图:

In the first router-outlet it will have two views:

• 身份验证组件(/login)

• auth component (/login)

管理组件(/admin)

admin component (/admin)

然后在第二个出口将在管理组件内，具有自己的路由，将呈现这些:

Then in the second outlet will be inside the admin component, with its own routes, that will render these:

• 仪表板 (/admin)

• dashboard (/admin)

个人资料(/admin/profile)

profile (/admin/profile)

用户 (/admin/users)

users (/admin/users)

现在，在 Angular 2 文档中，我可以看到他们使用模块实现了此功能.但我不想使用多个模块(或者我必须?).

Now, in the Angular 2 docs, I can see they have this implementation using modules. But I don't want to use multiple modules (or I have to?).

有没有办法在不分离模块的情况下实现这个?

Is there a way to make this implementation without separating modules?

我想要管理区域的默认组件，这就是我想要第二个路由器插座的原因，例如:仪表板将包含 HeaderComponent、LeftNavComponent 和 DashboardCompoent.但是配置文件页面也会包含所有这些 HeaderComponent 和 LeftNavComponent，唯一会改变的是 ProfileComponent，因此它的结构基本相同.我想我不需要为每个不同的管理页面重复每次导入.我只想拥有一个主要的管理组件，它会根据当前路线拥有动态内容.

I want a default component for the admin area, that is why I wanted the second router-outlet, for example: The dashboard will have the HeaderComponent, LeftNavComponent, and the DashboardCompoent. But the profile page will have all these HeaderComponent and LeftNavComponent too, and the only thing that would change is the ProfileComponent, so it will have basically the same structure. I think I don't need to repeat every importing for every different admin page. I wanted to have just one main admin component, that will have a dynamic content based on the current route.

我已经在互联网上进行了很多尝试和搜索，但我能找到的唯一示例来自官方 Angular 2 文档.但他们正在使用多个模块来实现这一点.

I already tried and searched in the internet a lot, but the only example I could find is from the official Angular 2 documentation. But they are implementing this with multiple modules.

推荐答案

虽然推荐使用模块，但它们对于任何路线导航都是可选的.

Although Modules are recommended they are optional for any route navigation.

您可以在没有任何模块的情况下配置如下路由.

You may configure routing like below without any modules.

app.routing

import { Routes, RouterModule }   from '@angular/router';

      import { DashboardComponent, 
         AdminComponent,
         ProfileComponent,
         UsersComponent
      } from './app.component';

      const appRoutes: Routes = [
      {
        path: '',
        redirectTo: '/dashboard/admin/users',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
        {
         path : 'admin',
         component: AdminComponent,
         children:[
           {
            path : 'users',
            component: UsersComponent
           },
           {
            path : 'profile',
            component: ProfileComponent
           }
         ]
        }
       ]
     }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

组件

import { Component }          from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Routing Deep dive</h3>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}


@Component({
  template: `
    <h3 class="title">Dashboard</h3>
    <nav>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
}

@Component({
  template: `
    <h3 class="title">Admin</h3>
    <nav>
      <a routerLink="users" routerLinkActive="active" >Users</a>
      <a routerLink="profile" routerLinkActive="active" >Profile</a>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AdminComponent {
}

@Component({
  template: `
    <h3 class="title">Profile</h3>
  `
})
export class ProfileComponent {
}

@Component({
  template: `
    <h3 class="title">Users</h3>
    <hr />
  `
})
export class UsersComponent {
}

这里是 Plunker！！

这篇关于Angular 2，RC5 路由器插座在另一个路由器插座内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！