在单独的文件中配置路由并在 app.module.ts 、 HTML 和 component.ts 文件中使用 angular 5/6

Question

我想将 appRoutes 分离到单独的 .ts 文件并导入其中 app.module.ts 以使用 RouterModule.forRoot(appRoutes) 中的值。

const appRoutes = [
  {
    path: '',
    component: AuthComponent,
    pathMatch: 'full'
  },
  {
    path: 'admin-portal' ,component: AdminMainComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: AdminDashboardComponent },
      { path: 'user', component: AdminUserComponent },
      { path: 'role', component: AdminRoleComponent },
      { path: 'rule', component: AdminRuleComponent }
    ]
  },
  {
    path: 'counter',
    component: CounterComponent,
    pathMath: 'full'
  },
  {
    path:  'fetch-data',
    component: FetchDataComponent,
    pathMath: 'full'
  },
  {
    path:  'login',
    component: AuthComponent,
    pathMath: 'full'
  }
];

现在在导入部分我有 RouterModule 的值

imports: [
    BrowserModule,HttpClientModule,FormsModule,
    RouterModule.forRoot(appRoutes),
    BrowserAnimationsModule
    ],

而不是放入 app.module.ts 文件，我如何分离路由器组件以分离文件并在 app.module.ts、HTML、component.ts 文件中使用。

正在尝试下面 link 中关于动态路由的一些建议 link : -

https://myview.rahulnivi.net/dynamically-importing-modules-related-components-angular-45/

https://angular.io/guide/router

Answer 1

您可以创建自定义路由器模块。

appRoutingModule.ts

const appRoutes = [
  {
    path: '',
    component: AuthComponent,
    pathMatch: 'full'
  },
  {
    path: 'admin-portal' ,component: AdminMainComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: AdminDashboardComponent },
      { path: 'user', component: AdminUserComponent },
      { path: 'role', component: AdminRoleComponent },
      { path: 'rule', component: AdminRuleComponent }
    ]
  },
  {
    path: 'counter',
    component: CounterComponent,
    pathMath: 'full'
  },
  {
    path:  'fetch-data',
    component: FetchDataComponent,
    pathMath: 'full'
  },
  {
    path:  'login',
    component: AuthComponent,
    pathMath: 'full'
  }
];
@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

在主应用模块中导入模块

appModule.ts

imports: [
    BrowserModule,HttpClientModule,FormsModule,
    AppRoutingModule, // router
    BrowserAnimationsModule
],

Answer 2

您可以创建一个专用的路由模块：app-routing.module.ts。

当您使用选项 --routing 生成新项目时，angular-cli 会自动管理它：ng new myproject --routing。它将使用您的应用程序模块生成一个单独的路由模块，并带有必要的导入。使用 cli 生成模块时可以使用此选项：ng generate module mymodule --routing.

这里是生成的模块代码：

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

const routes: Routes = [
];

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

您只需在 AppModule 中导入 AppRoutingModule。

在单独的文件中配置路由并在 app.module.ts 、 HTML 和 component.ts 文件中使用 angular 5/6

Config route in seperate file and consume in app.module.ts , HTML and component.ts file angular 5/6

typescript

angular-routing

angular

angular5

angular6