Angular 5中实现按钮跳转至其他页面的技术咨询

嗨，刚学Angular 5遇到页面跳转的问题太正常啦，我来一步步带你搞定按钮跳转页面的功能～

1. 先配置路由规则 #

Angular的页面跳转全靠路由模块撑着，首先得把你要跳转的页面路由配置好。假设你的项目里已经有app-routing.module.ts（用Angular CLI创建项目时选路由会自动生成），打开它添加以下代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 记得导入你要跳转的两个组件哦
import { AddEmployeeComponent } from './add-employee/add-employee.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 默认打开首页
  { path: 'add-employee', component: AddEmployeeComponent }, // 添加员工页面的路由
  { path: 'employee-list', component: EmployeeListComponent }, // 员工列表页面的路由
  { path: '**', redirectTo: '' } // 输入不存在的路径时跳回首页
];

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

2. 确保根组件有路由出口 #

打开app.component.html，一定要加上<router-outlet></router-outlet>，这是跳转后页面内容渲染的地方，就像个“容器”：

<!-- 这里可以放你的头部、导航栏等公共内容 -->
<router-outlet></router-outlet>
<!-- 这里可以放底部公共内容 -->

3. 改造你的Home组件实现跳转 #

方式一：编程式导航（用TS代码控制） #

这种方式适合需要在跳转前做一些逻辑处理的场景，比如验证用户权限。

首先修改Home.component.ts，导入并注入Router服务：

import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 导入Router服务

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  // 通过构造函数注入Router
  constructor(private router: Router) { }

  // 改造btnClick方法，接收路由路径参数
  btnClick(targetRoute: string) {
    // 调用router的navigate方法跳转
    this.router.navigate([targetRoute]);
  }
}

然后修改Home.component.html，给每个按钮传递对应的路由路径：

<div style="text-align:center">
  <button (click)="btnClick('add-employee')">Add Employee</button>
</div>
<br>
<div style="text-align:center">
  <button (click)="btnClick('employee-list')">Employee List</button>
</div>
<br>

方式二：模板式导航（更简单，不用写TS） #

如果跳转前不需要额外逻辑，直接用Angular的routerLink指令就行，代码更简洁：

<div style="text-align:center">
  <button routerLink="/add-employee">Add Employee</button>
</div>
<br>
<div style="text-align:center">
  <button routerLink="/employee-list">Employee List</button>
</div>
<br>

这种方式连Home.component.ts里的btnClick方法都可以删掉，直接在模板里搞定跳转～

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