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
            }
        ];
    }
}

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

Answer 2

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

let appRoutes = new AppRoutes();

然后

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

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

2 个答案: