Angular 2嵌套命名Router Outlet路径格式修改问题

没问题，这个需求完全可以实现！Angular默认给命名路由出口生成的带括号路径（比如/flights/(childRouter:one-way)）确实不够直观，我们只需要调整路由配置，就能改成你想要的/flights/one-way格式。

核心思路 #

默认的括号路径语法是Angular为多命名出口场景设计的（比如同时渲染主出口和命名出口的内容），但如果你的父组件里只有这一个命名出口，我们可以把子路由配置成父路由的常规子路径，同时指定它渲染到目标命名出口，这样就能得到扁平化的URL。

具体步骤 #

1. 修改路由配置 #

找到你的路由配置文件（一般是app-routing.module.ts或者对应的功能模块路由文件），调整子路由的配置方式：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FlightsComponent } from './flights/flights.component';
import { OneWayComponent } from './flights/one-way/one-way.component';
import { DefaultChildComponent } from './flights/default-child/default-child.component';

const routes: Routes = [
  {
    path: 'flights',
    component: FlightsComponent,
    children: [
      // 把命名出口的路由配置成常规子路径，同时指定outlet名称
      { path: 'one-way', component: OneWayComponent, outlet: 'childRouter' },
      // 配置默认路径（访问/flights时加载的组件）
      { path: '', component: DefaultChildComponent, outlet: 'childRouter' }
    ]
  }
];

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

2. 调整导航方式 #

现在你可以用常规的路径格式进行导航，不用再带命名出口的括号语法：

• 在模板中使用routerLink：

  <a routerLink="/flights/one-way">单程航班</a>
  

• 在组件类中使用Router服务导航：

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  navigateToOneWay() {
    this.router.navigate(['/flights/one-way']);
  }
  

注意事项 #

• 如果你的父组件FlightsComponent中同时存在默认路由出口（不带name属性的<router-outlet>）和命名出口，这种方法可能会导致路由匹配冲突，此时你需要重新评估路由结构，或者保留括号路径语法。
• 确保所有子路由都指定了outlet: 'childRouter'，避免Angular尝试在默认出口渲染组件导致错误。

这样配置后，访问/flights/one-way时，Angular会加载FlightsComponent，并在它的childRouter命名出口中渲染OneWayComponent，路径完全符合你的需求！

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