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

Question

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

我尝试像：
app.routes.ts

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

在应用程序中。

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 {}

Answer 2

AppRoutes 是一个类，因此您需要在使用之前对其进行实例化：

let appRoutes = new AppRoutes(); 

然后

...
RouterModule.forRoot(appRoutes.getRoutes())