javascript - 根据 URL 动态更改 DIV 的 css - Angular

Question

我有一个问题，我想根据我所在的 RouterModule 更改第一个 DIV(背景、宽度、高度...)的 CSS，这个 DIV 位于主 app.component.html

<div class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-1 col-md-1 col-sm-1" id="logo">
  <a routerLink=""><b>Logo</b></a>
</div>
<div id="navigation" class="col-xl-8 col-lg-10 col-md-10 col-sm-10">
  <ul>
    <li><a routerLink="/zivljenjepis">O MENI</a></li>
    <li><a routerLink="/jeziki">JEZIKI</a></li>
    <li><a routerLink="/projekti">PROJEKTI</a></li>
    <li><a routerLink="/kontakt">KONTAKT</a></li>
  </ul>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>

您有什么建议吗？谢谢

Answer 1

[routerLinkActive] 允许您在链接的路由变为事件状态时向元素添加 CSS 类。

HTML:

<a routerLink="/user/bob" routerLinkActive="class1">Bob</a>

CSS:

.class1 { background-color: red }

https://angular.io/api/router/RouterLinkActive