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

Question

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

Answer 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()路线链接到一条大路线并与之合作。