Angular 2+中如何检测自定义组件是否应用了routerLink指令？

当然有更智能的实现方式！不需要让用户手动传布尔值来切换，我们可以利用Angular的依赖注入机制，自动检测组件宿主元素上是否绑定了routerLink指令，从而动态决定渲染<a>还是<button>。下面给你两种实用的实现思路：

方案一：通过依赖注入检测RouterLink指令 #

Angular中，当你在组件的宿主元素上添加[routerLink]时，Angular会自动在该元素上实例化RouterLink指令。我们可以通过@Optional()和@Self()装饰器尝试注入这个指令实例——如果能获取到，就说明用户绑定了routerLink，反之则没有。

import { Component, Optional, Self, Output, EventEmitter } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Component({
  selector: 'my-button',
  template: `
    <!-- 根据是否存在routerLink切换渲染元素 -->
    <ng-container *ngIf="isRouterLinkPresent; else buttonTemplate">
      <a 
        [routerLink]="routerLink?.commands" 
        [routerLinkActive]="routerLink?.active"
        [routerLinkActiveOptions]="routerLink?.activeOptions"
      >
        <ng-content></ng-content>
      </a>
    </ng-container>

    <ng-template #buttonTemplate>
      <button (click)="onClick.emit($event)">
        <ng-content></ng-content>
      </button>
    </ng-template>
  `
})
export class MyButtonComponent {
  @Output() onClick = new EventEmitter<MouseEvent>();

  constructor(
    // 检测基础的routerLink指令（数组形式的路由）
    @Optional() @Self() private routerLink: RouterLink,
    // 同时支持routerLinkWithHref（字符串形式的路由）
    @Optional() @Self() private routerLinkWithHref: RouterLinkWithHref
  ) {}

  // 判断是否存在路由链接指令
  get isRouterLinkPresent(): boolean {
    return !!this.routerLink || !!this.routerLinkWithHref;
  }
}

方案说明 #

• @Optional()：表示如果宿主元素上没有对应的指令，就注入null，避免依赖注入失败报错
• @Self()：限定只从当前组件的宿主元素上查找指令，不会向上遍历父组件
• 模板中我们把routerLink的相关属性（commands、active等）传递给渲染的<a>标签，确保路由行为和原生routerLink完全一致

方案二：直接检查宿主元素的属性（适合简单场景） #

如果你不需要处理routerLink的复杂逻辑，只是想快速判断是否有routerLink绑定，也可以通过ElementRef直接检查宿主元素的属性：

import { Component, ElementRef, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  template: `
    <a *ngIf="hasRouterLink" [attr.href]="hostElement.getAttribute('ng-reflect-router-link')">
      <ng-content></ng-content>
    </a>
    <button *ngIf="!hasRouterLink" (click)="onClick.emit($event)">
      <ng-content></ng-content>
    </button>
  `
})
export class MyButtonComponent {
  @Output() onClick = new EventEmitter<MouseEvent>();
  hasRouterLink: boolean;

  constructor(private elementRef: ElementRef) {
    // 检查宿主元素是否有routerLink相关属性
    this.hasRouterLink = !!this.elementRef.nativeElement.hasAttribute('routerLink') || 
                         !!this.elementRef.nativeElement.hasAttribute('[routerLink]');
  }
}

注意事项 #

这种方式比较简单，但无法直接获取routerLink的指令实例，所以如果需要处理路由激活状态（routerLinkActive）等复杂逻辑，还是方案一更靠谱。

使用方案一的话，用户完全不需要额外配置，直接像使用原生按钮或链接一样：

<!-- 渲染为button -->
<my-button (onClick)="handleClick()">普通按钮</my-button>

<!-- 渲染为带routerLink的a标签 -->
<my-button [routerLink]="['/dashboard']" routerLinkActive="active">仪表盘</my-button>

内容的提问来源于stack exchange，提问作者panta82