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

问题描述

我正在尝试使用一个路由器出口在另一个路由器出口内创建一个项目：

它将像这样工作：

在第一个路由器出口中，它将有两个视图：

• auth组件（/ login ）




• 管理组件（/ admin）

然后在第二个出口中将位于admin组件内部，并带有自己的路线，这些路线将呈现以下内容：

• 仪表板（/ admin）




• 个人资料（/ admin / profile）




• 用户（/管理员/用户）

现在，在Angular 2文档中，我可以看到他们使用模块实现了该实现。但是我不想使用多个模块（或者必须？）。

有没有一种方法可以在不分离模块的情况下实现该实现？

我想要管理区域的默认组件，这就是为什么我想要第二个路由器插座的原因，例如：仪表板将具有HeaderComponent，LeftNavComponent和DashboardCompoent。但是配置文件页面也将具有所有这些HeaderComponent和LeftNavComponent，唯一会发生变化的是ProfileComponent，因此它将具有基本相同的结构。我认为我不需要为每个不同的管理页面重复每次导入操作。我只想拥有一个主要的管理组件，该组件将具有基于当前路线的动态内容。

我已经在互联网上进行了很多尝试和搜索，但是我能找到的唯一示例是来自Angular 2官方文档。

解决方案

尽管建议使用模块，但它们对于任何路线导航都是可选的。

您可以如下配置路由，而无需任何模块。

app.routing

  import {Routes，RouterModule}从'@ angular / router'; 
 
 import {DashboardComponent，
 AdminComponent，
 ProfileComponent，
 UsersComponent 
}； 
 
 const appRoutes：路由= [
 {
 path：''，
 redirectTo：'/ dashboard / admin / users'，
 pathMatch：'完整的'
}，
 {
路径：'dashboard'，
组件：DashboardComponent，
子代：[
 {
路径：' admin'，
组件：AdminComponent，
子级：[
 {
 path：'users'，
组件：UsersComponent 
}，
 {
 path：'profile'，
 component：ProfileComponent 
} 
] 
} 
] 
} 
]; 
 
导出常量路由= RouterModule.forRoot（appRoutes）; 
  

组件

< pre class = lang-js prettyprint-override> 从'@ angular / core'导入{组件};

@Component（{
选择器：'my-app'，
模板：`
< h3 class = title>深度深潜< / h3>
< hr />
< router-outlet>< / router-outlet>
`
}）
导出类AppComponent {
}


@Component（{
模板：`
< h3 class = title>仪表板< / h3>
< ; nav>
< / nav>
< hr />
< router-outlet>< / router-outlet>
`
}）
出口类DashboardComponent {
}

@Component（{
模板：`
< h3 class = title> Admin< / h3> ;
< nav>
< a routerLink = users routerLinkActive = active> Users / a>
< a routerLink = profile routerLinkActive = active >配置文件< / a>
< / nav>
< hr />
<路由器出口< / router-outlet>
`
}）
出口类AdminComponent {
}

@Co mponent（{
template：`
< h3 class = title> Profile< / h3>
`
}}
出口类ProfileComponent {
}

@Component（{
模板：`
< h3 class = title> Users< / h3>
< hr />
`
}）
导出类UsersComponent {
}


这是柱塞 !!

希望这会有所帮助！

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

It will work like this:

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

• auth component (/login)

• admin component (/admin)

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

• dashboard (/admin)

• profile (/admin/profile)

• users (/admin/users)

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?

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.

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);

components

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 {
}

Here is the Plunker!!

Hope this helps!!

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