Angular路由配置问题：如何将listRoutes传递给子组件？

看起来你踩了一个常见的Angular新手坑——路由模块里的常量默认是组件无法访问的，而且你的模板代码还有几个小问题需要修正。让我一步步帮你解决：

首先，核心问题：你在app-routing.module.ts里定义的listRoutes是一个私有常量（没有导出），组件的模板根本无法直接读取这个变量，所以*ngFor遍历的其实是一个不存在的值，自然拿不到数据。

接下来给你两种可行的解决方案，你可以根据自己的场景选择：

方案一：导出路由配置，在组件中引入并暴露给模板 #

这种方式适合路由配置需要在多个地方复用的情况：

1. 修改路由模块，导出listRoutes
   打开你的app-routing.module.ts，给listRoutes加上export关键字，让它能被外部组件导入：

   // app-routing.module.ts
   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   // 别忘了导入你的组件
   import { MlsComponent } from './mls.component';
   import { VenteComponent } from './vente.component';
   import { LocationComponent } from './location.component';
   import { VenteLocationComponent } from './vente-location.component';
   
   // 加上export，让外部可以访问
   export const listRoutes: Routes = [
     { path: '', component: MlsComponent },
     { path: 'vente', component: VenteComponent },
     { path: 'location', component: LocationComponent },
     { path: 'venteLocation', component: VenteLocationComponent },
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(listRoutes)],
     exports: [RouterModule]
   })
   export class ListRoutingModule {} // 确保你的路由模块有导出类
   

2. 在组件中导入并暴露路由配置
   打开包含mat-tab的父组件的.ts文件，导入listRoutes，并赋值给组件的一个属性，这样模板就能访问到了：

   // 比如你的父组件文件，比如 mls.component.ts
   import { Component } from '@angular/core';
   import { listRoutes } from './app-routing.module'; // 注意路径要和你的文件结构匹配
   
   @Component({
     selector: 'app-mls',
     templateUrl: './mls.component.html'
   })
   export class MlsComponent {
     // 把路由配置暴露给模板使用
     tabRoutes = listRoutes;
   }
   

3. 修正模板代码
   你的模板里有两个问题：重复的*ngFor（嵌套了一个多余的<a>循环），以及routerLink的绑定语法错误。修改后的模板应该是这样：

   <mat-tab *ngFor="let route of tabRoutes" [routerLink]="[route.path]">
     <!-- 这里可以添加tab的显示标签，根据路径显示友好名称 -->
     <ng-template mat-tab-label>
       {{ route.path === '' ? 'Accueil' : route.path | titlecase }}
     </ng-template>
   </mat-tab>
   

   这里用[routerLink]="[route.path]"是正确的属性绑定方式，数组形式也更灵活（如果以后路径带参数的话更容易扩展）。

方案二：直接在组件中定义路由配置 #

如果这个路由配置只给当前组件使用，没必要放在路由模块里，可以直接在组件内部定义：

// 组件.ts文件
import { Component } from '@angular/core';
import { Routes } from '@angular/router';
// 导入你的组件
import { VenteComponent } from './vente.component';
import { LocationComponent } from './location.component';
import { VenteLocationComponent } from './vente-location.component';

@Component({
  selector: 'app-mls',
  templateUrl: './mls.component.html'
})
export class MlsComponent {
  tabRoutes: Routes = [
    { path: '', component: MlsComponent },
    { path: 'vente', component: VenteComponent },
    { path: 'location', component: LocationComponent },
    { path: 'venteLocation', component: VenteLocationComponent },
  ];
}

然后模板和方案一的第三步完全一样，直接用*ngFor="let route of tabRoutes"即可。

额外提示 #

• 如果你需要给tab设置更友好的显示名称，比如把vente显示成Vente，location显示成Location，可以在路由配置里添加一个自定义属性，比如data: { label: 'Vente' }，然后在模板里用{{ route.data.label }}读取。
• 确保你的路由模块已经被正确导入到父模块（比如AppModule或者某个特性模块）中，否则路由不会生效。

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