Angular 带有链接的导航菜单栏

我正在尝试实现如下所示的导航菜单。我曾尝试将html和css放在app.component中，但没有成功。我将非常感谢任何帮助。谢谢

---

您只需要知道，您可以使用[routerLink Active]指令。请参见，当路由器等于routerLink时，您可以使用一个类或一个类数组

e、 g.使用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>

家


柜台


Fech数据

您是否包含图片？或代码，或任何有助于我们帮助您的有用信息？我试图包含图片，但收到一条消息，我无法包含图片，我不明白如何显示我正在尝试实现的菜单示例。您可能想在此处查看Material sidenav：感谢您的帮助