html - 单个页面上的不同导航栏 angular2

Question

我在默认的 app.component.html 文件中为整个项目设置了相同的导航栏，但在某些页面/组件上我需要不同的导航栏。实现它的最有效方法是什么？我应该为每个组件添加导航栏吗？

Answer 1

背景

您想在不同的组件页面上显示不同的导航栏。这根本不是问题。最有效的方法是有争议的，我们都需要有关您的项目的更多信息才能具体回答。但我会告诉你我会怎么做。

回答

我会在我的 Angular2 项目中创建模板。这些模板将根据在这些页面上传递的内容充当某些页面的网关。例如，如果您有一个页面需要安全并且必须在用户登录后访问。然后是另一个向公众开放的页面。您可以使用两个模板控制这两个页面，然后将所有页面设为这些模板的子页面。

所以在您的情况下，您需要不同的导航。让我们解决这个问题。

示例

模板目录

/templates/main.component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

/templates/main.component.html

<header></header>
 <!-- Main Content Outlet Selector -->
        <router-outlet></router-outlet>
     <!-- End Main Content Outlet Selector -->
</footer></footer>

/templates/second.component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './main.component.html'
})
export class SecondComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

/templates/second.component.html

<header></header>
     <!-- Main Content Outlet Selector -->
            <router-outlet></router-outlet>
         <!-- End Main Content Outlet Selector -->
    </footer></footer>

路线

/app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: MainComponent, data: { title: 'Main Views' }, children: MAIN_ROUTES },
    { path: '', component: SecondComponent, data: { title: 'Second Views' }, children: SECOND_ROUTES }
];

现在您已完成所有工作，您可以创建子路由并将正确的模板传递给您喜欢的任何路由和母路由。

main/routes.ts

export const MAIN_ROUTES: Routes = [
    { path: '', redirectTo: 'maybe home?', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
]

secondary/routes.ts

export const SECOND_ROUTES: Routes = [
    { path: '', redirectTo: 'aPath', pathMatch: 'full' },
    { path: 'items', component: SomeComponent },
]

最后

我们可以创建一个子组件来添加到母组件中!

/main/home.component.ts

@Component({
  templateUrl: './home.component.html',
})

export class HomeComponent {

  constructor() { }

}

/main/home.component.html

<div>cool stuff happens here because this is the main content area of the page now</div>

当然，我们所要做的就是确保将 home 组件添加到正确的子路由中。所以在这种情况下 MAIN_ROUTES

以防万一你对这些页面如何输出到路由器导出感到困惑，看看这个，

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { 
}