Angular 2 RouterLink for Select

发布时间：2020-12-17 17:54:10 所属栏目：安全来源：网络整理

导读：我想使用页面上的select元素创建导航.在锚标记上使用RouterLink指令很简单,但选择下拉列表是否相同？或者,当我的选择发生变化时,我是否需要在我的组件上创建自己的导航方法？ a [routerLink]="[location]"Location/aselect (change)="navigate($event.target

我想使用页面上的select元素创建导航.在锚标记上使用RouterLink指令很简单,但选择下拉列表是否相同？或者,当我的选择发生变化时,我是否需要在我的组件上创建自己的导航方法？

<a [routerLink]="[location]">Location</a>

<select (change)="navigate($event.target.value)">
    <option>--Select Option--</option>
    <option [value]="[location]">Location</option>
</select>

我正在寻找这样的东西：

<select>
    <option>--Select Option--</option>
    <option [routerLink]="[location]">Location</option>
</select>

解决方法

是的,您需要在组件内部创建导航方法并将其绑定到选择控件的(更改)事件,然后使用注入的路由器在该方法内部进行导航.

如果您查看Angular 2路由器source code for RouterLink指令,您将看到它也在场景后面使用router.navigate导航到目标路由.它不适用于您的select控件,因为select没有ClickLink指令捕获的click事件,如下所示：

// ** 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;
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!