如何在Angular 2+中的页面加载时添加默认活动类

Question

<ul>
    <li routerLinkActive = "active" class = "" >
    <a routerLink = "/A" skipLocationChange > A < /a>
    </li>
    <li routerLinkActive = "active" class = "" >
    <a routerLink = "/B" skipLocationChange > B < /a>
    </li>
    <li routerLinkActive = "active" class = "" >
    <a routerLink = "/C" skipLocationChange > c < /a>
    </li>

我的routing.ts

{     路径：“，     成分：A，     pathMatch：“已满” }，{     路径：“ A”，     成分：A }，{     路径：“ B”，     成分：B， }，{     路径：“ B”，     成分：B }，{     路径：“ C”，     成分：C }，{     路径：“ **”，     成分：A }

我想在页面加载时我的A组件应该来了，但是活动页面上的li不在活动上，我活动类应该在li上，并且当我移到另一个选项卡时，活动类应该切换取决于关于我们所处的组件。请帮助，谢谢

Answer 1

在您的导航组件中，导入ActivatedRoute并使您的“ active”类与用户当前所在的路线进行比较。

<li [ngClass]="{'active' : route == 'A'}"><a href="">A</a></li>

Answer 2

将您的最后一条路线更改为

{ path: '**', redirectTo: 'A' }