仅为模块组件添加导航栏 [英] Adding a navbar only for module's components

问题描述

我在angular 4应用程序中创建了一个功能模块，我想为该模块内的所有组件(仅)添加一个导航栏.我如何才能做到这一点，而又不必在每个组件中重复相同的导航栏代码?

I created a feature module in my angular 4 application, i want to add a navbar for all components (only) inside this module. How can i accomplish that without repeating the same code of the navbar in every component ?

谢谢

推荐答案

仅使用导航栏和路由器插座构建外壳"组件.然后将功能模块组件路由到该路由器插座.

Build a "shell" component with only your navbar and a router outlet. Then route your feature module components to that router outlet.

Shell组件模板:

Shell component template:

<pm-menu></pm-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

路由配置:

    RouterModule.forRoot([
        {
            path: '',
            component: ShellComponent,
            children: [
                { path: 'welcome', component: WelcomeComponent },
                { path: 'customers', component: CustomerComponent },
                { path: 'products', component: ProductComponent },
                { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            ]
        },
        { path: '**', component: PageNotFoundComponent }
    ])

这篇关于仅为模块组件添加导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！