如何将Angular应用中的导航链接传递给自定义NPM库侧边栏？

1. 统一导航链接的数据结构 #

首先在自定义库中定义一个公共接口，确保主应用和库对导航链接的格式达成一致：

// 自定义库 src/lib/models/route-link.model.ts
export interface RouteLink {
  path: string;
  label: string;
  icon?: string; // 可选字段，用于显示图标
}

记得把这个接口导出到库的public-api.ts中，方便主应用导入：

// 自定义库 public-api.ts
export * from './lib/models/route-link.model';

2. 标记主应用中需要展示的路由 #

在主应用的app-routing.module.ts里，给需要显示在侧边栏的路由添加data标记，用来筛选目标链接：

// 主应用 app-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: '', 
    component: HomeComponent, 
    data: { sidebar: true, label: '首页', icon: 'icon-home' } 
  },
  { 
    path: 'about', 
    component: AboutComponent, 
    data: { sidebar: true, label: '关于我们', icon: 'icon-info' } 
  },
  // 不需要显示的路由无需添加sidebar标记
];

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

3. 在自定义库的侧边栏组件中添加输入属性 #

修改库的侧边栏组件，通过@Input接收主应用传递的导航链接数组：

// 自定义库 src/lib/sidebar/sidebar.component.ts
import { Component, Input } from '@angular/core';
import { RouteLink } from '../models/route-link.model';

@Component({
  selector: 'lib-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  @Input() links: RouteLink[] = []; // 接收外部传入的导航链接
}

同时把侧边栏组件导出到public-api.ts，主应用才能使用这个组件：

// 自定义库 public-api.ts
export * from './lib/sidebar/sidebar.component';
export * from './lib/your-library.module'; // 导出库的模块，主应用需导入

4. 在主应用中提取并传递导航链接 #

在主应用的根组件（比如app.component.ts）中，注入Router筛选出标记过的路由，整理成符合RouteLink格式的数组，再传给侧边栏组件：

// 主应用 app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { RouteLink } from 'your-custom-library'; // 导入库的接口

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sidebarLinks: RouteLink[] = [];

  constructor(private router: Router) {
    // 从路由配置中筛选出需要显示的侧边栏链接
    this.sidebarLinks = this.router.config
      .filter(route => route.data?.sidebar)
      .map(route => ({
        path: route.path || '',
        label: route.data?.label || '',
        icon: route.data?.icon
      }));
  }
}

5. 渲染侧边栏导航链接 #

在自定义库的侧边栏模板中，用*ngFor循环渲染导航链接，并绑定routerLink和激活状态：

<!-- 自定义库 sidebar.component.html -->
<nav class="sidebar-nav">
  <a 
    *ngFor="let link of links"
    [routerLink]="link.path"
    routerLinkActive="active-sidebar-link"
    class="sidebar-link"
  >
    <span *ngIf="link.icon" class="{{ link.icon }}"></span>
    {{ link.label }}
  </a>
</nav>

6. 在主应用中使用侧边栏组件 #

在主应用的根模板中导入并使用库的侧边栏组件，传入整理好的导航链接：

<!-- 主应用 app.component.html -->
<lib-sidebar [links]="sidebarLinks"></lib-sidebar>
<router-outlet></router-outlet>

注意事项 #

• 确保自定义库的package.json中把@angular/router设为peerDependency，避免版本冲突：

  "peerDependencies": {
    "@angular/router": "^16.0.0" // 替换为你的Angular版本
  }
  

• 如果有嵌套子路由需要展示，可扩展筛选逻辑，递归遍历路由的children字段。

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