Измените имя выпадающего меню в соответствии с выбором в Angular

Question

В моем веб-приложении Angular есть это выпадающее меню:

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN
    <span class="caret"></span></button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" routerLink="/first">First</a></li>
    <li role="menuitem"><a class="dropdown-item" routerLink="/second">Second</a></li>
    <li role="menuitem"><a class="dropdown-item" routerLink="/third">Third</a></li>
  </ul>
</div>

Я хочу, чтобы имя выпадающего меню, где в настоящее время читается NAMEOFDROPDOWN, изменилось на любое имя маршрута, которое я выбрал в раскрывающемся списке.

Как мне это сделать?

Answer 1

Привязать событие click к элементам списка, например:

<li role="menuitem"><a class="dropdown-item" routerLink="/first" (click)="changeRoute('First')">First</a></li>
<li role="menuitem"><a class="dropdown-item" routerLink="/second" (click)="changeRoute('Second')">Second</a></li>
<li role="menuitem"><a class="dropdown-item" routerLink="/third" (click)="changeRoute('Third')">Third</a></li>

Затем в файле .ts вашего компонента вы определяете метод changeRoute(route), который устанавливает атрибут selectedRoute.

export class YourComponent  {
  selectedRoute = "default value";

  changeRoute(route: string) {
    this.selectedRoute = route;
  }
}

и, наконец, вы привязываете значение вашей выпадающей кнопки к этому атрибуту:

<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"> 
   {{selectedRoute}}
<span class="caret"></span></button>