Angular Select 2 个 RouterLink

Question

我想在我的页面上使用 select 元素创建导航。在锚标记上使用 RouterLink 指令很简单，但是 select 下拉菜单是否有等效项？或者我是否需要在我的组件上创建自己的导航方法，以便在 select 发生变化时调用？

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

Answer 1

是的，您需要在组件内部创建一个导航方法并将其绑定到 select 控件的 (change) 事件，然后使用注入的 Router.

如果您查看 Angular 2 Router source code for RouterLink 指令，您会发现它也在幕后使用 router.navigate 导航到目标路线。它不适用于您的 select 控件，因为 select 没有由 RouterLink 指令捕获的 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;
  }

Answer 2

Html 模板：

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

组件：

import {Router} from '@angular/router-deprecated'; //or updated version

constructor(private router: Router){}

navigateTo(value) {
    if (value) {
        this.router.navigate([value]);
    }
    return false;
}

Angular Select 2 个 RouterLink

Angular 2 RouterLink for Select

angular2-template

angular2-routing

angular