使用 Angular 2 的子路由答案

【问题标题】：Child routing using angular 2使用 Angular 2 的子路由
【发布时间】：2017-02-09 08:28:01
【问题描述】：

我对 Angular 2 非常陌生。我正在尝试使用登录和仪表板页面构建一个简单的应用程序。我需要了解如何根据我的应用程序需要应用路由。

登录页面是一个独立的路由配置，但我希望在使用登录时，新的新仪表板页面带有导航栏和它自己的<router-outlet>。

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    //APPLICATION ROUTES WITH OWN <router-outlet>
    { path: '**', redirectTo: 'login' }
]

在 Angular 1 的早期，我们使用了带有抽象状态和子状态的 ui-router。

请建议我们如何做到这一点。

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

工作小伙伴

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

创建一个 ContainerComponent，它应该拥有自己的 router-outlet 和 routerLinks。

默认情况下，总是使用redirectTo加载到anyComponent

{ path: 'component-two', component: ComponentTwo,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }

【讨论】：

【解决方案2】：

假设你在主模块中有一个子模块。
So App模块和登录子模块

主模块目录结构

app.routing.module.ts 看起来像这样

export const routes: Routes = [
  { path: '', component:LoginComponent, pathMatch: 'full'},
   { path: Constants.LOGINROUTE, component:LoginComponent, pathMatch: 'full'}
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes,{ useHash: true })],
  exports: [RouterModule]
})

和对应的 login.routing.module.ts

@NgModule({
  imports: [RouterModule.forChild([
    { path: Constants.LOGINROUTE, component: LoginComponent}
  ])],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

和 dashboard.routing.module.ts 看起来像这样

@NgModule({
  imports: [RouterModule.forChild([
    { path: Constants.DASHBOARDROUTE,  component: DashboardComponent}
  ])],
  exports: [RouterModule]
})
export class DashboardRoutingModule {}

在 login.module.ts 中对应包括 login.routing.module.ts 和dashboard.routing.module.ts 中的相同

【讨论】：

您可以给我寄一份小样吗。
如果您也可以共享 html 实现，那就太好了。
你确定。拍你的电子邮件。
请发邮件到这个id => ravimittal16@hotmail.com

【解决方案3】：

我已经在我的项目中这样做了。

这用于子路由的延迟加载：

你应该在你的主要app-routing.module.ts 中像这样使用loadChildren：

{ path: 'crisis-center',
  loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule'
 },

然后在下面的代码中从您的app-module.ts file 中删除component：

app.module.ts ：

@NgModule({
      imports: [ RouterModule.forRoot(routes, { useHash: true })
        // ,AdminModule 
       ],
      declarations: [ ],
      providers: [ ],
      bootstrap: [ AppComponent ]
    })

app-routing.module.ts：

export const routes: Routes = [
  { path:  'dashboard',                  component: DashboardComponent },
  { path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  { path: 'crisis-center',
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule'
  },
  { path:  '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path:  '**',                         component: PageNotFound},

];

现在很好。当router 导航到此路由时，它使用loadChildren 字符串动态加载AdminModule。然后它将AdminModule 路由添加到其当前路由配置中。最后，它将请求的路由加载到目标管理组件。

您也可以在您的routing 文件中使用它（children[]），并且可以为每个子路由提供单独的组件：

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            canDeactivate: [CanDeactivateGuard]
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

然后将所有组件添加到您的特定 module.ts 文件中，如下所示：

import { NgModule                   }       from '@angular/core';
import { CommonModule               }       from '@angular/common';
import { FormsModule                }       from '@angular/forms';
import { CrisisCenterRoutingModule  }       from './crisis-center-routing.module';
import { CrisisCenterComponent      }       from './crisis-center.component';
import { CrisisListComponent        }       from './crisis-list.component';
import { CrisisDetailComponent      }       from './crisis-detail.component';
import { CrisisCenterHomeComponent  }       from './crisis-center-home.component';
import { CrisisService              }       from './crisis.service';

 @NgModule({
  imports: [ CommonModule,CrisisCenterRoutingModule,FormsModule, ],
  declarations: [CrisisCenterComponent ,CrisisListComponent,CrisisDetailComponent,CrisisCenterHomeComponent ],
  providers: [ CrisisService ],
})

export class CrisisCenterModule {}

【讨论】：