我想使用页面上的select元素创建导航.在锚标记上使用RouterLink指令很简单,但选择下拉列表是否相同？或者,当我的选择发生变化时,我是否需要在我的组件上创建自己的导航方法？
@H_404_7@
@H_404_7@
<a [routerLink]="[location]">Location</a>
<select (change)="navigate($event.target.value)">
<option>--Select Option--</option>
<option [value]="[location]">Location</option>
</select>
@H_404_7@我正在寻找这样的东西：
@H_404_7@
<select>
<option>--Select Option--</option>
<option [routerLink]="[location]">Location</option>
</select>
解决方法
是的,您需要在组件内部创建导航方法并将其绑定到选择控件的(更改)事件,然后使用注入的路由器在该方法内部进行导航.
@H_404_7@
@H_404_7@如果您查看Angular 2路由器source code for RouterLink指令,您将看到它也在场景后面使用router.navigate导航到目标路由.它不适用于您的select控件,因为select没有ClickLink指令捕获的click事件,如下所示：
@H_404_7@
// ** Code below is copied from Angular source code on GitHub. **
@HostListener("click")
onClick(): boolean {
// If no target,or if target is _self,prevent default browser behavior
if (!isString(this.target) || this.target == '_self') {
this._router.navigate(this._commands,this._routeSegment);
return false;
}
return true;
}
