RouterLink 选择器

Question

来自官方文档的 RouterLink 指令 select或者是 :not(a):not(area)[routerLink]（这意味着 select 所有具有 routerLink 属性的元素都不是锚点或区域元素，对吧？）

那么如何处理这样的锚标签：

<a [routerLink]="['/user/bob']" >
  link to user component
</a>

Answer 1

有 2 个 RouterLink 指令：

@Directive({selector: 'a[routerLink],area[routerLink]'})
export class RouterLinkWithHref implements OnChanges, OnDestroy {
}

@Directive({selector: ':not(a):not(area)[routerLink]'})
export class RouterLink {
}

两者之间存在一些细微差异，我想 Angular 团队认为维护两个不同的指令最能满足这一点。

但要回答您的问题，是的，您的 HTML 示例有效。您可能会在 99.99% 的 Angular 项目中找到与此用法相当的内容。

<a [routerLink]="['/user/bob']" >
  link to user component
</a>

差异

a[routerLink] 有这些补充：

constructor(/*args*/) {
  this.subscription = router.events.subscribe((s: Event) => {
    if (s instanceof NavigationEnd) {
      this.updateTargetUrlAndHref();
    }
  }
}

ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }

还有一些额外的 click 处理 - 覆盖默认的 <a> 和 <area> 点击处理。

链接

源代码：https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts

a[routerLink] 的文档：https://angular.io/api/router/RouterLinkWithHref

:not(a)[routerLink] 的文档：https://angular.io/api/router/RouterLink

RouterLink 选择器

RouterLink selector

routerlink

angular

差异

链接