带有链接的导航菜单栏

Question

我正在尝试实现一个如下所示的导航菜单。我试图将html和css放在app.component中，但这不起作用。我将不胜感激任何帮助。谢谢！

Picture of menu

Answer 1

您唯一需要了解的是可以使用[routerLinkActive]指令，请参见https://angular.io/api/router/RouterLinkActive，当路由器与routerLink相等时，您可以使用一个类或一个类数组

例如使用Bootstrap 4.0.1

<ul class="nav flex-column">
  <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
    <a class="nav-link" [routerLink]='["/"]'>Home</a>
  </li>
  <li class="nav-item" [routerLinkActive]='["link-active"]' >
    <a class="nav-link" [routerLink]='["/counter"]' >Counter</a>
  </li>
  <li class="nav-item" [routerLinkActive]='["link-active"]' >
    <a class="nav-link" [routerLink]='["/fetch-data"]' >Fech Data</a>
  </li>
</ul>