Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2 RouterLink for Select大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_673_1@
我想使用页面上的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;
  }

大佬总结

以上是大佬教程为你收集整理的Angular 2 RouterLink for Select全部内容,希望文章能够帮你解决Angular 2 RouterLink for Select所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。