Question

这是使用Bootstrap类的HTML代码。当我单击导航栏上的三个元素之一时，我想显示一个特定的组件。

<nav class="navbar navbar-light bg-light navbar-expand-md">
   <a href="#" class="navbar-brand">Navbar</a>
   <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="nav-item">
            <a href="#" class="nav-link">FirstEl</a>
         </li>
         <li class="nav-item">
            <a href="#" class="nav-link">SecondEl</a>
         </li>
      </ul>
      <ul class="nav navbar-nav ml-auto">
         <li class="dropdown nav-item ">
            <a href="#" class="dropdown-toggle nav-link " role="button">Third
               <span class="caret"></span>
            </a>
      <ul class="dropdown-menu">
         <li class="dropdown-item">
            <a href="#">Save Data</a>
         </li>
         <li class="dropdown-item">
            <a href="#">Fetch Data</a>
         </li>
      </ul>
         </li>
      </ul>
   </div>
</nav>

Answer 1

为了您的理解，我创建了一个简单的项目stackblitz

如果您的应用程序中有更多路由，则可以为路由创建一个单独的文件。

The Angular Router enables navigation from one view to the next as users perform application tasks.

最好参考documentation

Answer 2

看看routerLink，这是文档：https://angular.io/api/router/RouterLink

但是，您必须首先遵循本教程：https://angular.io/tutorial/toh-pt5

单击时如何在导航栏中引用组件

2 个答案: