如何为Angular各Feature Module的RouterLink添加独立前缀

方法一：Feature Module路由配置+相对路由 #

这是最轻量化的方案，利用Angular路由的层级特性实现前缀自动拼接：

1. 在Feature Module的路由配置中，给整个模块的路由设置统一前缀：

// app-feature-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  {
    path: 'app', // 模块专属前缀
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent },
      // 其他子路由
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AppFeatureRoutingModule { }

2. 在模块内的模板中使用相对路由（去掉路径开头的/），RouterLink会自动拼接模块前缀：

<!-- App Feature模块内的组件模板 -->
<a routerLink="home">Home</a> <!-- 自动解析为/app/home -->
<a routerLink="about">About</a> <!-- 自动解析为/app/about -->

如果需要跨层级跳转，用相对路径语法即可：

<!-- 从/app/home跳转到/app/history -->
<a routerLink="../history">History</a>

方法二：自定义指令封装RouterLink #

如果需要保持模板中写绝对路径（带/）但自动添加前缀，可以自定义指令拦截RouterLink输入：

1. 定义模块专属前缀常量：

// app-feature.constants.ts
export const APP_FEATURE_ROUTE_PREFIX = '/app';

2. 创建自定义指令继承原生RouterLink：

// custom-router-link.directive.ts
import { Directive, Input } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';
import { APP_FEATURE_ROUTE_PREFIX } from './app-feature.constants';

@Directive({
  selector: '[appRouterLink]'
})
export class AppRouterLinkDirective extends RouterLink {
  @Input() set appRouterLink(path: string | any[]) {
    if (typeof path === 'string' && path.startsWith('/')) {
      this.routerLink = `${APP_FEATURE_ROUTE_PREFIX}${path}`;
    } else {
      this.routerLink = path;
    }
  }
}

@Directive({
  selector: '[appRouterLinkWithHref]'
})
export class AppRouterLinkWithHrefDirective extends RouterLinkWithHref {
  @Input() set appRouterLinkWithHref(path: string | any[]) {
    if (typeof path === 'string' && path.startsWith('/')) {
      this.routerLink = `${APP_FEATURE_ROUTE_PREFIX}${path}`;
    } else {
      this.routerLink = path;
    }
  }
}

3. 在Feature Module中声明并导出指令：

// app-feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppFeatureRoutingModule } from './app-feature-routing.module';
import { AppRouterLinkDirective, AppRouterLinkWithHrefDirective } from './custom-router-link.directive';

@NgModule({
  declarations: [
    AppRouterLinkDirective,
    AppRouterLinkWithHrefDirective,
    // 模块内组件
  ],
  imports: [
    CommonModule,
    AppFeatureRoutingModule
  ],
  exports: [
    AppRouterLinkDirective,
    AppRouterLinkWithHrefDirective
  ]
})
export class AppFeatureModule { }

4. 模板中使用自定义指令：

<a appRouterLink="/home">Home</a> <!-- 自动拼接为/app/home -->
<a appRouterLink="/about">About</a> <!-- 自动拼接为/app/about -->

方法三：路由常量统一管理 #

如果不想修改路由结构或自定义指令，可以用常量统一维护前缀，避免重复书写：

1. 定义模块路由路径常量：

// app-feature-routes.const.ts
export const AppFeatureRoutes = {
  HOME: '/app/home',
  ABOUT: '/app/about',
  HISTORY: '/app/history',
  TEAM: '/app/team'
};

2. 组件中引入常量并绑定到模板：

// home.component.ts
import { Component } from '@angular/core';
import { AppFeatureRoutes } from './app-feature-routes.const';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  routes = AppFeatureRoutes;
}

3. 模板中使用常量：

<a [routerLink]="routes.HOME">Home</a>
<a [routerLink]="routes.ABOUT">About</a>

内容的提问来源于stack exchange，提问作者Duc Trung Mai