Question

我有一个父组件，它在HTML中保存一个导航元素，并根据选择的链接显示不同的组件，例如

<nav>
    <a routerLink="/hello">Hello</a>
    <a routerLink="/world">World</a>
</nav>
<router-outlet></router-outlet>

现在，我想更改所选导航链接的样式。所以我在TypeScript文件中声明了一个变量并使用＆＃34; hello＆＃34;初始化它，因为这是在应用程序开始时加载的路径：

selected: string = 'hello';

和方法：

setSelected(selected: string): void {
    this.selected = selected;
}

并将导航更改为：

<nav>
     <a routerLink="/hello" [class.selected]="selected == 'hello'" 
         (click)="setSelected('hello');">Hello</a>
     <a routerLink="/world" [class.selected]="selected == 'world'"
         (click)="setSelected('wolrd');">World</a>
</nav>

在CSS工作表中，我声明了所选类的样式。

到目前为止，这工作得很好，而不是一个问题：如果我在/ world-path重新加载页面，那么＆＃34; Hello＆＃34; -link的样式为选中，因为该变量再次初始化，但router-outlet仍然显示/world的内容。 p>

有没有办法，通过使用当前路由器路径而不是点击事件来改变样式，还是有完全不同的方法来解决这个问题？

Answer 1

您应该使用名为RouterLinkActive的build in指令，该指令根据当前活动路由设置css类。

像这样使用：

<nav>
  <a routerLink="/hello" routerLinkActive="selected">Hello</a>
  <a routerLink="/world" routerLinkActive="selected">World</a>
</nav>

通过路由器路径

1 个答案: