根据 Angular 中的选择更改下拉菜单的名称

【问题标题】：Change the name of the dropdown menu according to selection in Angular根据 Angular 中的选择更改下拉菜单的名称
【发布时间】：2020-02-02 17:56:50
【问题描述】：

在我的 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）更改为我从下拉列表中选择的路径的名称。

我该怎么做？

【问题讨论】：

您在寻找 [routerLinkActive] 吗？ angular.io/guide/router#active-router-links
我希望下拉列表的名称（在我的示例代码中显示为“随机标题”）更改为我通过打开下拉列表选择的路线名称（第一、第二、第三）并点击它。

标签： html angular typescript dropdown

【解决方案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>

【讨论】：