Angular4中如何导航到子路由？附路由配置与HTML代码

嗨，我来帮你搞定Angular 4里的子路由导航问题！结合你给出的路由配置，我分几个关键步骤和场景给你详细说明：

首先先回顾下你的路由配置，方便对照：

export const Approute: Routes = [ 
  { path: '', component: DashboardComponent }, 
  { path: 'add-course', component: AddCourseComponent }, 
  { path: 'builder', component: BuilderComponent, children: [ 
    { path: 'add-builder', component: AddBuilderComponent}, 
    { path: 'list-builder', component: ListBuilderComponent} 
  ] } 
];

1. 先确保父组件有路由出口 #

子路由对应的组件（AddBuilderComponent、ListBuilderComponent）需要渲染在父组件（BuilderComponent）的模板里，所以你必须在BuilderComponent的HTML模板中添加<router-outlet>标签，否则导航到子路由后看不到任何内容：

<!-- BuilderComponent的模板文件 -->
<div>
  <!-- 父组件的其他内容 -->
  <h2>Builder模块</h2>
  <!-- 子路由组件会渲染在这里 -->
  <router-outlet></router-outlet>
</div>

2. 模板中用routerLink直接导航 #

这是最常用的声明式导航方式，直接在你的侧边栏菜单里修改<a>标签即可：

绝对路由写法（从根路径出发） #

适合在任何页面都能直接跳转到子路由的场景：

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <!-- 跳转到Dashboard -->
    <li><a [routerLink]="['/']">Dashboard</a></li>
    <!-- 跳转到Add Course -->
    <li><a [routerLink]="['/add-course']">Add Course</a></li>
    <!-- 跳转到Builder的子路由Add Builder -->
    <li><a [routerLink]="['/builder/add-builder']">Add Builder</a></li>
    <!-- 跳转到Builder的子路由List Builder -->
    <li><a [routerLink]="['/builder/list-builder']">List Builder</a></li>
  </ul>
</div>

相对路由写法（基于当前激活的父路由） #

如果当前已经在/builder路由下（也就是BuilderComponent已经激活），可以用更简洁的相对路径：

<!-- 假设当前在/builder页面，点击这些链接会跳转到对应子路由 -->
<li><a [routerLink]="['add-builder']">Add Builder</a></li>
<li><a [routerLink]="['list-builder']">List Builder</a></li>

3. 组件类中编程式导航 #

如果需要通过按钮点击、接口请求完成等逻辑触发导航，就用这种方式：

首先在组件中注入Router（如果用相对路由还要注入ActivatedRoute）：

import { Router, ActivatedRoute } from '@angular/router';

@Component({
  // 组件元数据
})
export class YourSidebarComponent {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute // 相对路由需要用到
  ) {}

  // 跳转到Add Builder
  navigateToAddBuilder() {
    // 绝对路由方式
    this.router.navigate(['/builder/add-builder']);
    
    // 如果当前在/builder路由下，用相对路由的写法
    // this.router.navigate(['add-builder'], { relativeTo: this.activatedRoute });
  }

  // 跳转到List Builder
  navigateToListBuilder() {
    this.router.navigate(['/builder/list-builder']);
    
    // 相对路由写法
    // this.router.navigate(['list-builder'], { relativeTo: this.activatedRoute });
  }
}

然后在模板中绑定点击事件：

<li><a (click)="navigateToAddBuilder()">Add Builder (编程式)</a></li>
<li><a (click)="navigateToListBuilder()">List Builder (编程式)</a></li>

几个注意点 #

• 确保你的AppModule中已经正确导入RouterModule并配置了路由：RouterModule.forRoot(Approute)
• 路由路径要严格和配置中的一致，比如add-builder不要写成驼峰式的addBuilder
• 相对路由只有在当前激活路由是父路由/builder时才生效，如果不确定当前路由状态，优先用绝对路由更稳妥

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