Angular 15特性模块多辅助路由触发警告的解决方法

我有3个router-outlet：

• primary
• router-outlet（名称为detail）
• router-outlet（名称为visited）

所有路由都配置在特性模块country中。点击左侧国家列表，右侧显示详情，底部展示“最近访问”日志。此示例仅用于演示多辅助路由，我清楚有多种实现方式。

界面截图：

路由配置（country.routing.module.ts） #

const routes: Routes = [
  {path: 'country', component: CountryComponent, children: [
    {path: '', children: [
      {path: '', component: CountryMasterComponent},
      {path: ':name', outlet: 'detail', component: CountryDetailComponent},
      {path: 'messages', outlet: 'visited', component: CountryVisitedComponent}
    
    ]},
  ]},  
];

主组件跳转代码 #

<a [routerLink]="['../country', { outlets: { detail: [country.name] } }]"></a>

CountryDetail组件代码 #

constructor(private route: ActivatedRoute,
    private router: Router, private apiService: RestApiService) {}
  ngOnInit(): void {
    this.country$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        this.apiService.getCountry(params.get('name')!))
    );
    
  }

ApiService代码 #

getCountry(name: string): Observable<Country> {
    const c$ = this.getAllCountries(false).pipe(map((countries: Country[]) => 
      countries.find(country => country.name === name)!)
    );
    if(c$) {
      this.messageService.addMessage("Fetched county: "+name);
    }
    return c$;
  }
}

MessageService代码 #

addMessage(msg: string): void {
  this.messages.push(msg);
  this.router.navigate(['../country', { outlets: {visited: ['messages']}}]);
}

当前URL显示正常：

http://localhost:4200/country/(visited:messages//detail:Turkey)

所有功能运行正常，但控制台出现以下警告：

country-master.component.html:6 The navigation to
/country/(detail:Turkey//visited:messages) will instead go to
/(detail:Turkey//visited:messages) in an upcoming version of Angular.
relativeTo might need to be removed from the UrlCreationOptions.

message.service.ts:23 The navigation to
/country/(visited:messages//detail:Turkey) will instead go to
/(visited:messages//detail:Turkey) in an upcoming version of Angular.

问题：如何解决这些警告？

这个警告是Angular路由新版本中对相对路径处理的变更提示，核心问题是当前路由跳转写法在未来版本会被解析为根路径而非相对路径，调整写法即可解决：

1. 修正主组件的routerLink #

去掉显式回退再指定../country的写法，直接基于当前路由上下文更新辅助路由：

<a [routerLink]="[{ outlets: { detail: [country.name] } }]"></a>

Angular会自动在当前country路由的上下文内更新detail辅助路由，无需额外指定父路径。

2. 修改MessageService中的navigate调用 #

同样无需用../country指定路径，改为基于当前路由的相对跳转。可以注入ActivatedRoute并通过relativeTo明确上下文，或直接用.表示当前路由：

// 先在MessageService构造函数注入ActivatedRoute
constructor(private router: Router, private route: ActivatedRoute) {}

addMessage(msg: string): void {
  this.messages.push(msg);
  this.router.navigate([{ outlets: { visited: ['messages'] } }], { relativeTo: this.route });
}

或者更简洁的写法：

addMessage(msg: string): void {
  this.messages.push(msg);
  this.router.navigate(['.', { outlets: { visited: ['messages'] } }]);
}

这里的.代表当前路由，确保跳转始终在country模块上下文内进行。

原理说明 #

Angular未来版本会严格处理相对路径中的../符号，配合辅助路由使用时，旧写法会被解析为跳出当前路由模块到根路径。通过使用相对路径的简化写法，可确保路由始终在country模块内跳转，消除警告。

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