Angular 4 - Routes - 如何创建一个单独的模块来管理路由并在app.module.ts文件中使用它

Question

我是Angular的新手,我想routes在单独的组件中实现并在app.module.ts文件中导入相同的组件.如何在app.module.ts文件中导入routes组件.

我试着像:
app.routes.ts

import { UsersComponent } from './users/users.component';

export class AppRoutes {
    getRoutes() {
        return [
            {
                path: 'users',
                component: UsersComponent
            }
        ];
    }
}

在app.modules.ts中

import { AppRoutes } from './app.routes';
@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    RouterModule.forRoot(AppRoutes.getRoutes())
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在这里得到错误:

RouterModule.forRoot(AppRoutes.getRoutes())

Answer 1

您应该创建一个单独的路由模块,并在此模块中添加路由器信息.

像这样:

routing.module.ts 文件结构

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

import { LoginComponent } from './user/login/login.component'; //your component

const routes: Routes = [
    { path: 'login', component: LoginComponent}
  ];

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

导入RouterModule并配置您的路径信息然后导出您的配置(在路由器模块的导出部分)为另一个模块,如app.module.

然后导入并将路由模块注入基础模块app.module

像这样:

app.module.ts 文件结构

import { RoutingModule } from './routing.module';

@NgModule({
  declarations: [],
  imports: [
    RoutingModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}