Angular CLI v1.6.8路由导航：HTML中routerLink使用咨询

嗨，关于Angular CLI v1.6.8里用routerLink替代href实现SPA路由导航的问题，我来给你一步步讲清楚~

1. 先确认路由模块已正确配置 #

routerLink依赖Angular的路由系统，所以首先得确保你的项目已经设置好了路由模块：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你要导航到的组件
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 默认路由
  { path: 'home', component: HomeComponent },
  { path: 'user/:id', component: UserComponent } // 带参数的路由
];

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

同时，记得在根模块（AppModule）里导入这个AppRoutingModule，并且在根组件的模板（比如app.component.html）中添加<router-outlet></router-outlet>——这是路由组件的渲染容器，没有它导航后看不到目标组件的内容哦。

2. 基础的routerLink用法 #

在HTML模板中，直接用[routerLink]指令替代href，它会触发Angular的客户端路由，不会刷新整个页面：

<!-- 跳转到首页 -->
<a [routerLink]="['/home']">首页</a>

<!-- 也可以简化成字符串形式（适合简单路径） -->
<a routerLink="/home">首页</a>

这里的方括号[]是Angular的属性绑定语法，用来绑定一个表达式（数组形式更灵活，后面会说）。

3. 带参数的路由导航 #

如果你的路由配置了参数（比如上面的user/:id），可以在routerLink的数组中传入参数值：

<!-- 跳转到id为123的用户页面 -->
<a [routerLink]="['/user', 123]">查看用户123</a>

这样导航后，目标组件可以通过ActivatedRoute服务获取到这个id参数。

4. 相对路径导航 #

如果需要基于当前路由进行相对导航（比如从/user/123跳转到/user/123/profile），可以直接写相对路径的数组：

<!-- 当前在/user/123，跳转到/user/123/profile -->
<a [routerLink]="['profile']">用户资料</a>

<!-- 返回上一级并跳转到用户456 -->
<a [routerLink]="['../', 456]">切换到用户456</a>

5. 组件类中通过Router服务导航 #

如果需要在组件逻辑里（比如按钮点击事件后）进行导航，可以注入Router服务：

// user.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  constructor(private router: Router) {}

  goToHome() {
    // 跳转到首页
    this.router.navigate(['/home']);
  }

  goToUser(userId: number) {
    // 跳转到指定用户页面
    this.router.navigate(['/user', userId]);
  }
}

然后在模板中调用这个方法：

<button (click)="goToHome()">回到首页</button>

这样就能完全替代href，实现SPA的无刷新路由导航啦~

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