Angular 15：如何为库中的通用链接组件配置Router？

你的核心问题是库模块无法提前知晓宿主应用的路由配置，同时要让组件兼容RouterLink、href和onClick。可以通过以下方式实现，既不依赖宿主路由信息，又能保证组件的兼容性：

1. 库模块仅导入空的RouterModule.forChild #

不要在库模块中导入宿主的路由模块或调用RouterModule.forRoot，而是导入RouterModule.forChild([])——这会让库模块获取RouterLink、RouterLinkActive等所需的指令和服务，但不会向宿主应用添加任何路由配置，完全由宿主自己管理路由规则。

库模块代码示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MultiPurposeLinkComponent } from './multi-purpose-link.component';

@NgModule({
  declarations: [MultiPurposeLinkComponent],
  imports: [
    CommonModule,
    // 导入空的forChild，提供Router相关指令，不添加路由
    RouterModule.forChild([])
  ],
  exports: [MultiPurposeLinkComponent]
})
export class MultiPurposeLinkModule { }

2. 组件中可选注入Router服务 #

为了兼容未配置Router的宿主应用，在组件中注入Router时添加@Optional()和@SkipSelf()装饰器——前者表示如果Router服务不存在则注入null，后者确保从宿主应用的注入器获取Router服务，避免库自身误提供服务。

组件代码示例：

import { Component, Input, Optional, SkipSelf } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'lib-multi-purpose-link',
  template: `
    <a 
      [href]="!router ? href : null"
      [routerLink]="router ? routerLink : null"
      [routerLinkActive]="router ? activeClass : null"
      (click)="handleClick($event)"
    >
      <ng-content></ng-content>
    </a>
  `
})
export class MultiPurposeLinkComponent {
  @Input() href?: string;
  @Input() routerLink?: any[] | string;
  @Input() activeClass = 'active';
  @Input() onClick?: () => void;

  constructor(
    // 可选注入宿主的Router服务，无Router时为null
    @Optional() @SkipSelf() private router: Router
  ) {}

  handleClick(event: MouseEvent) {
    // 优先执行自定义onClick事件
    if (this.onClick) {
      this.onClick();
      // 如果是RouterLink场景，阻止默认跳转
      if (this.router && this.routerLink) {
        event.preventDefault();
      }
    }
    // 无Router且无href时，阻止默认点击行为
    if (!this.router && !this.href) {
      event.preventDefault();
    }
  }
}

3. 模板中的兼容性处理 #

通过条件绑定，当宿主存在Router时启用routerLink和routerLinkActive，否则 fallback 到href或自定义onClick逻辑，确保组件在任何宿主环境下都能正常工作。

关键说明 #

• 为什么用forChild([])：它只会注册Router相关的指令和服务，不会修改宿主的路由配置，完美适配库的独立性要求。
• 可选注入的意义：避免宿主未配置Router时出现依赖注入错误，让组件具备降级能力。

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