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()路线链接到一条大路线并使用它。

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

1 个答案: