我的Angular Web应用程序中有此下拉菜单:
<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。
我该怎么做?
将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>