Angular CLI 1.0.0-rc.0 和模块之间的路由答案

【问题标题】：Angular CLI 1.0.0-rc.0 and routing between modulesAngular CLI 1.0.0-rc.0 和模块之间的路由
【发布时间】：2017-03-03 00:01:25
【问题描述】：

我创建了以下 angular2 cli 应用程序：

ng new my-project --routing ng g 模块团队

那么我有以下结构：

--app
  --app.component.css
  --app.component.html
  --app.component.ts
  --app.module.ts
  --app-routing.module.ts
  --team
    --team.module.ts
    --team-routing.module.ts
    --team-detail
      --team-detail.component.css
      --team-detail.component.html
      --team-detail.component.ts

基本上我有两个模块，AppModule 和 TeamModule，我想配置这两个模块之间的路由。我现在在路由中有以下设置（这是使用 ng generate module [name] --routing 生成模块时的默认设置）：应用路由.module.ts

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

const routes: Routes = [
  {
    path: '',
    children: []
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

团队路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {TeamDetailComponent} from "./team-detail/team-detail.component";

const routes: Routes = [
  { path: ':id', component: TeamDetailComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class TeamRoutingModule { }

所以，如果我去 url，我不知道如何配置路由

{host}:{port}/team/:id

组件 TeamDetailComponent 处理它。但是如果我去 {host}:{port}/ 然后 App 会处理它

我尝试的每件事都会导致错误。我该怎么办？我应该如何配置孩子？与路由相关的文档不是很清楚，我尝试了一些我在网上看到的东西，但每次都会导致新的错误，特别是一个说 TeamDetailComponent 没有在任何模块中声明，尽管我声明它在团队模块。

【问题讨论】：

我认为这不能解决您的问题，但我通常使用declarations: [ TeamDetailComponent ]

标签： angular angular2-routing angular-cli

【解决方案1】：

这是你必须做的，将根路由模块指向你的团队模块

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

const routes: Routes = [
  {
    // Example route
    path: 'home',
    component: HomeComponent
  }, {
    // Point the loadChildren to your team module
    path: 'team',
    loadChildren: 'app/team/team.module#TeamModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

现在在你的第二个模块上配置路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {TeamDetailComponent} from "./team-detail/team-detail.component";

const routes: Routes = [
  { path: '',
    children: [{
      path: ':id',
      component: TeamDetailComponent
    }]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class TeamRoutingModule { }

通过这种方式，您的路由被拆分为父级和子级，更好的是团队模块现在是延迟加载的！

请注意，这是未经测试的，因此某处可能有一个小错字，但它应该是这样工作的！

这是一篇关于延迟加载的好文章 https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

【讨论】：