Question

我的应用程序中有一个顶部导航栏和一个侧面导航栏。

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：从'@ angular / core'导入{Component，OnInit，Input};

@Component({
  selector: 'app-leftNav',
  templateUrl: './leftNav.component.html',
  styleUrls: ['./leftNav.component.scss']
})
export class leftNavComponent implements OnInit {

  @Input() section: string;
  constructor() { }

  ngOnInit() {
  }

}

我希望在Page1a，Page1b或Page1C上，左侧Nav上的“主页”选项卡保持活动状态（或具有使其变为活动状态的CSS）。

我还希望（在页面加载时）在左侧导航中激活“主页”标签，并激活Page1a。我已经尝试以Page1a html中的模板为起点，但是没有看到任何结果。

所有这些页面都是单独路由的，不是其他页面的子对象* 谢谢！

同时将焦点放在顶部导航和侧面导航（angular2 +）

0 个答案: