Angular动态底部导航TS类型不兼容错误求助

正在学习Angular，尝试构建底部动态导航（主导航已正常实现，且在app.routes.ts中完成懒加载）。当前遇到TS2322类型不兼容错误：router.config中title的类型为string | Type<Resolve<string>> | ResolveFn<string>，无法赋值给自定义routes数组要求的string类型。怀疑参考的Angular 18教程不适配当前环境，寻求解决方法。

错误信息 #

Application bundle generation failed. [0.250 seconds]

X [ERROR] TS2322: Type '{ path: string; title: string | Type<Resolve<string>> | ResolveFn<string>; }[]' is not assignable to type '{ path: string; title: string; }[]'.
  Type '{ path: string; title: string | Type<Resolve<string>> | ResolveFn<string>; }' is not assignable to type '{ path: string; title: string; }'.
    Types of property 'title' are incompatible.
      Type 'string | Type<Resolve<string>> | ResolveFn<string>' is not assignable to type 'string'.
        Type 'Type<Resolve<string>>' is not assignable to type 'string'. [plugin angular-compiler]

    src/app/components/footer/footer-nav/footer-nav.component.ts:20:4:
      20 │     this.routes = this.router.config.filter(

组件TS代码 #

import { Component, inject } from '@angular/core';
import { RouterModule, Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'footer-nav',
  standalone: true,
  imports: [
    RouterModule
  ],
  templateUrl: './footer-nav.component.html',
  styleUrl: './footer-nav.component.scss'
})
export class FooterNavComponent {
 routes: { 
    path:   string; 
    title:  string;  
  }[] = [];

  constructor(private router: Router) {
    this.routes = this.router.config.filter(
      route => route.path !== '' && route.data && route.title)
      .map(route => ({ path: route.path!, title: route.title!, }
    ));
  }

}

组件HTML代码 #

<p>footer-nav works!</p>
<nav>
  @for ( route of routes; track route.title ){
    <li>
      <a [routerLink]="[route.path]" routerLinkActive="active">{{ route.title }}</a>
    </li>
  }

</nav>

app.routes.ts代码 #

import { Routes } from '@angular/router';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'en',
    pathMatch: 'full'
  },
  {
    path: 'en',    
    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
    title: 'English Home Page ! Web Prototype',
    data:{      
      desciption: 'This is the Web Prototype home page',
    }    
  },
  {
    path: 'en/about-us',    
    loadComponent: () => import('./pages/about-us/about-us.component').then((d) => d.AboutUsComponent),
    title: 'English About Us ! Web Prototype',
    data:{      
      desciption: 'This is he Web Prototype About Us pages',
    }  
  },
  {
    path: 'en/sign-up-reactive',        
    loadComponent: () =>  import('./pages/form/form.component').then((d)  => d.FormComponent),    
    title: 'English Sign Up Form ! Web Prototype',
    data:{      
      desciption: 'This is he Web Prototype About Us pages'
    }  
  },
  {
    path: 'en/sign-up-dynamic',    
    loadComponent: () => import('./pages/sign-up/sign-up.component').then((d) => d.SignUpComponent),
    title: 'English Sign Up Form ! Web Prototype',
    data:{      
      desciption: 'This is he Web Prototype About Us pages'
    }  
  },  
];

解决方法 #

方法1：类型断言+过滤（适配当前静态title场景） #

由于你的路由配置中title都是字符串，可在过滤时确认title为字符串类型，并通过类型断言告诉TypeScript该值为字符串：

修改组件TS中的constructor部分：

constructor(private router: Router) {
  this.routes = this.router.config.filter(
    // 过滤掉title非字符串的路由
    route => route.path !== '' && route.data && typeof route.title === 'string')
    .map(route => ({ 
      path: route.path!, 
      // 断言title为string类型
      title: route.title as string 
    }));
}

方法2：调整自定义路由类型（兼容动态title场景） #

如果后续计划使用动态title（如ResolveFn或Resolve类），可将自定义routes数组的title类型与Angular路由保持一致：

import { Type, Resolve } from '@angular/router';

// ...

routes: { 
  path: string; 
  title: string | Type<Resolve<string>> | ResolveFn<string>;  
}[] = [];

注意：这种情况下HTML中直接{{ route.title }}无法正确显示动态title，需额外处理解析逻辑（比如通过服务解析title值）。

错误原因说明 #

Angular从14+版本开始支持动态页面标题，允许title属性为字符串、Resolve类或ResolveFn函数，因此router.config中的title是联合类型。而你的自定义routes数组限定title为纯字符串，导致类型不兼容。

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