根据Angular中的选择更改下拉菜单的名称 [英] Change the name of the dropdown menu according to selection in Angular

问题描述

我的Angular Web应用程序中有一个下拉菜单:

There is this dropdown menu in my Angular web-application:

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

I want the name of the Dropdown, where currently reads NAMEOFDROPDOWN, to change to whatever is the name of the route that I select from the dropdown.

我该怎么做?

推荐答案

将 click 事件绑定到列表元素，例如:

Bind a click event to the list elements like:

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

Then in your component's .ts-file you define a method changeRoute(route) which set's an attribute selectedRoute.

export class YourComponent  {
  selectedRoute = "default value";

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

最后，将下拉按钮的值绑定到该属性:

and finally you bind the value of your dropdown button to this attribute:

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

这篇关于根据Angular中的选择更改下拉菜单的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！