Angular 4-路由-如何创建一个单独的模块来管理路由并在app.module.ts文件中使用 [英] Angular 4 - Routes - How to create a separate module for managing routes and use it in app.module.ts file

问题描述

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

I am newbie in Angular, I want to implement the routes in separate component and import the same component in app.module.ts file. How do I import the routes component in app.module.ts file.

我正在尝试：

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())

推荐答案

您应创建单独的模块进行路由，并在此添加路由器信息

you should create a separate module for routing and add your router info in this module.

像这样：

routing.module.ts 文件结构

routing.module.ts file structure

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 。

import RouterModule and config your routs info then export your config (in export section of router module) for another module like app.module.

然后导入并将您的路由模块注入到基本模块 app.module

then import and inject your routing module to your base module app.module

像这样：

app.module.ts 文件结构

app.module.ts file structure

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

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

这篇关于Angular 4-路由-如何创建一个单独的模块来管理路由并在app.module.ts文件中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！