Question

我创建了以下angular2 cli app：

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生成模块时的默认设置： app-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 { }

团队routing.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 { }

所以，我不知道如何配置路线，如果我去了网址

{主机}：{端口} /团队/：ID

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

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

Answer 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

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

1 个答案: