Angular 4.x Router Link Directives

RouterLink 指令简介

RouterLink 指令可以让你链接到应用程序的特定部分。若链接是静态的,我们可以按照以下的方式,来使用该指令:

link to user component

如果你需要使用动态值生成链接地址,你可以传递一个路径片段 (segments) 的数组,然后再传递每个段的参数。例如使用 ['/team', teamId, 'user', userName, {details: true}] 数组,意味着我们想要生成一个链接到 /team/11/user/bob;details=true

多个静态段 (segments) 能够被合并为一个,例如 ['/team/11/user', userName, {details: true}]

第一个路径片段可以以 /./../ 开头:

  • 如果以 / 开头,路由将从根路由开始查找

  • 如果以 ./ 开头或没有使用 / ,则路由将从当前激活路由的子路由开始查找

  • 如果以 ../ 开头,路由往上一级查找

你可以使用以下方式设置查询参数和片段 (fragment):


   link to user component

RouterLink 指令将基于以上设定的输入参数,生成如下链接:/user/bob#education?debug=true 。此外我们可以通过 queryParamsHandling 属性来声明如何处理查询参数,可用的选项是:

  • merge - 合并已有的 queryParams 到当前的 queryParams

  • preserve - 保存当前的 queryParams

  • default ('') - 仅使用查询参数

具体使用示例如下:


    link to user component

RouterLink 指令详解

RouterLink 指令定义

@Directive({selector: ':not(a)[routerLink]'})

RouterLink 指令输入属性

// 设置URL相关的查询参数
@Input() queryParams: {[k: string]: any};

// 设置URL上的hash fragment
@Input() fragment: string; 

// 设置查询参数处理方式:merge、preserve 、default 
@Input() queryParamsHandling: QueryParamsHandling; 

// 设置是否保留fragment
@Input() preserveFragment: boolean;

// 设置页面导航时,是否把新的状态添加到历史记录中
@Input() skipLocationChange: boolean;

// 设置页面导航的同时,是否替换历史记录中的当前状态
@Input() replaceUrl: boolean;
 
// 设置commands参数信息,如:['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
    if (commands != null) {
      this.commands = Array.isArray(commands) ? commands : [commands];
    } else {
      this.commands = [];
    }
}

RouterLink 指令绑定

事件绑定

// 监听RouterLink指令宿主元素的click事件,进行页面切换
@HostListener('click')
onClick(): boolean {
  const extras = {
     skipLocationChange: attrBoolValue(this.skipLocationChange),
     replaceUrl: attrBoolValue(this.replaceUrl),
   };
   this.router.navigateByUrl(this.urlTree, extras);
   return true;
}

// 转化设置的属性值为bool值
function attrBoolValue(s: any): boolean {
  return s === '' || !!s;
}

RouterLink 类的构造函数

export class RouterLink { 
    constructor(
      private router: Router, 
      private route: ActivatedRoute,
      @Attribute('tabindex') tabIndex: string, 
      renderer: Renderer, el: ElementRef) {
        if (tabIndex == null) {
          renderer.setElementAttribute(el.nativeElement, 'tabindex', '0');
        }
    }
}

@Attribute()

@Attribute('attributeName') 装饰器:用于获取指令宿主元素上 attributeName 属性名对应的属性值。

tabindex

tabindex 属性规定元素的 tab 键控制次序 (当 tab 键用于导航时)。

以下元素支持 tabindex 属性:, ,