Html 单个页面角度处的不同导航栏2

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

背景

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

回答

我会在我的

Angular2

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

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

示例

模板目录

/模板/main.component.ts

/模板/main.component.html

/模板/second.component.html

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

主要/主要路线

中学/中学

最后

我们可以创建一个子组件添加到mama组件

/main/home.component.ts

/main/home.component.html

---

非常感谢你的回答。所以，基本上你们创建了两个导航条（在组件中），通过布线你们可以在特定的模板中得到正确的导航条？是的。这就是我设置所有应用程序的方式。这样，我可以根据最终用户应该收到的内容显示不同的模板。例如，如果某些路由应该是安全的，并且用户必须登录。或者在或模板上显示某个导航，在另一个上显示另一个导航。这样设置你的应用程序可以让你在应用程序增长时根据你的需求控制显示许多不同的视图。如果这对你有帮助，请接受答案。

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

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

    ngOnInit(): void { }
}

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

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

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

    ngOnInit(): void { }
}

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

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

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

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

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

export class HomeComponent {

  constructor() { }

}

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

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

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