Angular 2，RC5 路由器插座在另一个路由器插座内

Posted 2023-02-22

【中文标题】Angular 2，RC5 路由器插座在另一个路由器插座内

【英文标题】：Angular 2, RC5 router-outlet inside another router-outlet

【发布时间】：2016-12-30 23:22:32

【问题描述】：

我正在尝试在另一个路由器插座中使用一个路由器插座来制作一个项目：

它将像这样工作：

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

身份验证组件（/login）

管理组件（/admin）

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

仪表板 (/admin)

个人资料（/admin/profile）

用户 (/admin/users)

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

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

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

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

【问题讨论】：

延迟加载需要模块，据我所知，在下次更新后将是必需的，因为 Component.pipes 和 Component.directives 已弃用。

很高兴知道！昨天我问自己为什么他们没有在他们的（Angular 2 文档）示例中使用“.directives”属性。那么现在一切都将从模块中导入，而不是从组件中导入？如果是这样的话，现在还有一个使用模块的理由！哈哈哈。

【参考方案1】：

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

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

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 文档，现在我了解了如何使用所有这些模块、路由和子路由，我想我会这样做。您的示例结果与我预期的有点不同，我想要两个路由器插座，一个在 /login 和 /admin 之间切换，另一个插座将进入 /admin 以在 /admin 路径的这些物品之间导航。但是由于您的示例，现在我可以理解如何修改它以使一切都按我以前的意愿工作。再次感谢您的帮助！

@ThiagoYoithi：很高兴知道它有帮助......干杯！

@günter-zöchbauer 任何利用模块延迟加载的示例。

【参考方案2】：

添加延迟加载模块的解决方案。这是根据标题而不是原始问题正文的通用答案。

我为非登录用户创建了一个名为 UserCheckinModule 的单独模块，其中包含 Login 和 Signup 页面/组件，因为它们通常共享共同的设计和功能/服务。

app.routing.module.ts 中定义的路由 -

const routes: Routes = [
   path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' ,
   path: '**', redirectTo: 'user' 
];

在 user-checkin.-routing.module.ts 中为 UserCheckin 模块定义的路由 -

const routes: Routes = [
  
    path: '',
    component: CheckinComponent, // base template component
    children: [
       path: '', redirectTo: 'login' ,
       path: 'login', component: LoginComponent ,
       path: 'signup', component: SignupComponent ,
       path: '**', redirectTo: 'login' 
    ]
  
];

app.component.html 已经包含一个router-outlet 并充当整个应用程序的基本模板/布局。 UserCheckinModule 是一个子模块，有自己的路由和基本模板。

checkin.component.html 基本模板的内容 -

<router-outlet></router-outlet>