Angular4 / 5多个路由器模块作为子路由器模块和一个父路由器模块

时间:2018-03-01 07:07:37

标签: angular angular-router

我如何拥有多个路由器模块,比如我有核心和主要模块角度,他们将有不同的单独路由模块,我想在我们的app.routing.ts / app.module中导入这两个路由模块。 ts作为父路由模块。它有什么解决方案吗?

1 个答案:

答案 0 :(得分:1)

假设你read the documentation。 您可以将应用程序功能扩展到模块。每个模块都应该有自己的路径。

所以说我们正在谈论急切加载的模块, app.module.ts将导入基本路由模块(父路由,核心路由),每个功能模块将导入自己的相关路由。

然后

app.module.ts将导入所有功能模块。以及他们的路线。

核心路由与功能路由之间的唯一区别是使用功能路由中的.forChild(routes)导出路由,并使用.forRoot(routes)导出路由。

您可以拥有尽可能多的.forChild()次导入,但您只需在核心模块中使用一个.forRoot()

App.Module.ts (不包含路由,只导入其他路由模块)

// import { ... } from '...';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppFeatureRoutingModule
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

App-routing.Module.ts (核心路线)

// import { ...} from '...';

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

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

App-feature-routing.Module.ts (功能路线)

  // import { ...} from '...';

    const featureRoutes: Routes = [
        { path: 'myFeatureIndex', component: FeatureIndexComponent }
    ];

    @NgModule({
        imports: [RouterModule.forChild(featureRoutes)],
        exports: [RouterModule]
    })
    export class AppFeatureRoutingModule { }

因此,App.Module分别导入核心路径和每个功能路由。 您可以拥有任意数量的功能路线。在幕后,Angular将最终将所有.forChild()路线和forRoot()路线链接到一条大路线并使用它。