Различные navbar на отдельной странице angular2

Question

Я установил одинаковый navbar для всего проекта в файле app.component.html по умолчанию, но на определенной странице/компоненте мне нужен другой. Каков наиболее эффективный способ его достижения? Должен ли я добавлять navbar для каждого компонента?

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> 

Маршруты

/приложение. 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 }, 
] 

вторичные/маршрутов.ц

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> 

И, конечно, все, что мы должны сделать, это убедиться, что мы добавьте домашний компонент в правильные дочерние маршруты. Так что в этом случае MAIN_ROUTES

Только в случае, если вы не уверены, как эти страницы все выходные данные на маршрутизатор-розетки, посмотрите на это,

app.component.ts

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

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