Как я могу ссылаться на компонент в навигационной панели

Question

Это HTML-код, использующий классы Bootstrap. Я хочу отобразить определенный компонент, когда нажимаю на один из трех элементов на панели навигации.

<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.

Лучше обратиться Документация

Answer 2

Посмотрите на routerLink, вот документация: https://angular.io/api/router/RouterLink

Однако сначала вы должны были следовать этому уроку: https://angular.io/tutorial/toh-pt5