Question

我想使用页面上的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>

Answer 1

Html模板：

var myStrings = ["How", "", "do", "", "I", "", "merge", "", "these?"];
var result = [myStrings.join(" ").replace(/\s\s/g, " ")];
console.log(result); // ["How do I merge these?"]

组件：

join

Answer 2

是的，您需要在组件内部创建导航方法并将其绑定到选择控件的(change)事件，然后使用注入的Router在该方法内部进行导航。

如果您查看Angular 2路由器source code获取RouterLink指令，您会发现它也在场景后面使用router.navigate导航到目标路线。它不适用于select控件，因为select没有click事件，这个事件由RouterLink指令捕获，如下所示：

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

Angular 2 RouterLink for Select

2 个答案: