Angular CLI中子组件间路由跳转实现方法咨询

你可以用两种简单的方式实现Templar组件到FreeMason组件的跳转，前提是已经在app-routing.module.ts里配置好FreeMason组件的路由（比如{ path: 'freemason', component: FreeMasonComponent }）：

方法一：模板中直接用routerLink指令 #

直接在Templar组件的模板文件（templar.component.html）里添加跳转链接，和导航栏的用法一致：

<a routerLink="/freemason">前往共济会页面</a>

点击这个链接就会触发路由跳转，加载FreeMason组件。

方法二：通过Router服务在组件类中逻辑跳转 #

如果需要通过按钮点击等事件触发跳转，可以用Router服务：

1. 在Templar组件的类文件（templar.component.ts）中导入Router：

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

2. 在构造函数中注入Router服务：

constructor(private router: Router) { }

3. 添加跳转方法：

goToFreeMason() {
  this.router.navigate(['/freemason']);
}

4. 在模板里绑定这个方法（比如用按钮）：

<button (click)="goToFreeMason()">跳转到共济会</button>

注意事项 #

• 确保路由模块里的路径和你routerLink或navigate里写的完全匹配，大小写也要一致。
• 如果是带参数的路由，只需要在路径数组里追加参数即可，比如this.router.navigate(['/freemason', id])。

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