Angular 同时在顶部导航和侧面导航上设置焦点（角度2+；）

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

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>

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>

我希望在第1a页、第1b页或第1c页时，左侧导航上的“主页”选项卡保持活动状态（或使用CSS使其看起来处于活动状态）

我还希望（页面加载时）“主页”选项卡在左侧导航中处于活动状态，而Page1a处于活动状态。我曾尝试在Page1aHTML中使用模板作为起点，但没有看到任何结果

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

  ---

您可以使用[ngClass]=“{'active'，variable==1}”而不是routerLinkActive（并手动更改“variable”的值）@Eliseo 1是否表示它处于活动状态而0处于非活动状态？因此，在每个顶级导航页面的TS文件中，我会将变量设置为1或0？这是一个旧链接，但显示了ngClass和style的不同用途

<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>

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

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

  ngOnInit() {
  }

}