在Angular中设计活动路由器链接的样式

在angular中对活动路由器链接进行造型，可以让用户区分活动路由器链接和非活动路由器链接。Angular提供了一个特殊的机制来处理活动路由器链接。

步骤:

创建要使用的Angular应用程序。
创建包含导航链接的页眉组件。
然后在每个路由器链接上应用 “routerLinkActive”，并为这个属性提供CSS类。这里我们在CSS文件中创建了 “活动 “类。
为根路由提供{exact : true }，以避免多个活动路由器链接。

语法:

<a routerLink="/" routerLinkActive="active" >Home</a>

例子：我们已经用指定的路由创建了标题组件。

<span>
    <ul>
        <li><a routerLink="/" routerLinkActive="active">
            Home
        </a></li>
        <li><a routerLink="/products" 
            routerLinkActive="active">Products
        </a></li>
        <li><a routerLink="/about" 
            routerLinkActive="active">About Us
        </a></li>
        <li><a routerLink="/contact" 
            routerLinkActive="active">Contact Us
        </a></li>
    </ul>
</span>
<router-outlet></router-outlet>

这里我们提供了 “routerLinkActive”，这是自动激活当前路由的路由功能，我们也必须提供CSS类。在这里，routerLinkActive = “active” active是一个CSS类，自动应用于激活的路由。

.active{
    background: 'white'
}

但在这里，它仍然导致一个问题，我们的主路由总是处于活动状态，即使我们导航到其他路由，这背后的原因是“routerLinkActive”工作方式。主页路由在“localhost:4200/”上工作，其他路由在“localhost:4200/about”上工作，所以“routerLinkActive”会在其他路由中找到“localhost:4200/”，而主页路由器链接总是处于活动状态，以处理这个问题，angular提供了另一个指令，叫做routerLinkActiveOptions。

Updated

<span>
    <ul>
        <li><a routerLink="/" routerLinkActive="active" 
            [routerLinkActiveOptions]={exact:true}>Home
        </a></li>
        <li><a routerLink="/products" 
            routerLinkActive="active">Products
        </a></li>
        <li><a routerLink="/about" 
            routerLinkActive="active">About Us
        </a></li>
        <li><a routerLink="/contact" 
            routerLinkActive="active">Contact Us
        </a></li>
    </ul>
</span>
<router-outlet></router-outlet>

所以routerLinkActiveOptions只允许准确的路径匹配作为主页组件的活动路由。

输出:

在Angular中设计活动路由器链接的样式