Question

我在angular 4应用程序中创建了一个功能模块，我想在此模块中为所有组件（仅限）添加一个导航栏。如何在不重复每个组件中导航栏的相同代码的情况下实现这一目标？

谢谢

Answer 1

构建＆＃34; shell＆＃34;仅包含导航栏和路由器插座的组件。然后将功能模块组件路由到该路由器插座。

Shell组件模板：

<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 }
    ])

仅为模块的组件添加导航栏

1 个答案: