Настройка фокуса на верхнюю и боковую навигацию одновременно (angular2+)
У меня есть верхняя панель навигации и боковая панель навигации в моем приложении.
topNav.Component.html:
<nav id="topnav">
<div class="container">
<a routerLinkActive="active" tabindex="1" class="skip-link" href="#skipContent">Skip to content</a>
<a routerLinkActive="active" tabindex="2" routerLink="/page1a">Page1-a</a>
<a routerLinkActive="active" tabindex="2" routerLink="/page1b">Page1-b</a>
<a routerLinkActive="active" tabindex="2" routerLink="/page1c">Page1-c</a>
</div>
<nav>
topNav.Component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-topNav',
templateUrl: './topNav.component.html',
styleUrls: ['./topNav.component.scss']
})
export class topNavComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
leftNav.component.html:
<nav id="main-navigation">
<div *ngIf="section == 'home'; else homeInactive">
<a id="Home" routerLinkActive="inactive"
routerLink="/page1a">
</a>
</div>
<ng-template #homeInactive>
<a id="Home"
routerLinkActive="active" routerLink="/page1a">
</a>
</ng-template>
<a id="leftTab2" routerLinkActive="inactive"
routerLink="/leftTab2">
</a>
<a id="leftTab3" routerLinkActive="inactive" routerLink="/leftTab3">
</a>
</nav>
leftNav.component.ts: import {Component, OnInit, Input} из '@angular/core';
@Component({
selector: 'app-leftNav',
templateUrl: './leftNav.component.html',
styleUrls: ['./leftNav.component.scss']
})
export class leftNavComponent implements OnInit {
@Input() section: string;
constructor() { }
ngOnInit() {
}
}
Мне бы хотелось, чтобы вкладка "home" на левой панели Nav оставалась активной (или имела CSS, который делает ее активной), когда она находится на Page1a, Page1b или Page1C.
Я также хотел бы (при загрузке страницы), чтобы вкладка "home" была активной в левой навигационной панели, а Page1a была активной. Я попытался использовать шаблон HTML в качестве отправной точки, но не увидел результатов.
- Все эти страницы маршрутизируются индивидуально и не являются дочерними элементами других страниц * Спасибо!