单个页面angular2处的不同导航栏

Question

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

Answer 1

<强>背景

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

<强>答案

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

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

示例

模板目录

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

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

主/ routes.ts

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

次级/ routes.ts

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

<强>最后

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

/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 { 
}