Настройка фокуса на верхнюю и боковую навигацию одновременно (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 в качестве отправной точки, но не увидел результатов.

  • Все эти страницы маршрутизируются индивидуально и не являются дочерними элементами других страниц * Спасибо!

0 ответов

Другие вопросы по тегам