1. 在app.module.ts中import BrowserAnimationsModule，引入动画模块。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ...
  ],
  ...
})
export class AppModule { }

2. 在app.component.html文件中添加mat-stepper组件，并设置linear属性为true实现水平一步一步的移动效果。

  
    

      ...
      Next
    
  
  
    

      ...
      Back
      Next
    
  
  
    Finish
    You are now done.
    

      Back
    
  

3. 为了实现浏览器历史按钮的功能，我们需要用到Angular的router模块。在app.module.ts中引入RouterModule，并添加路由信息。

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'step', component: StepComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

4. 在app.component.html文件中添加router-outlet指令，用于渲染路由对应的组件。

  Home
  Step

5. 在StepComponent中添加两个路由导航方法，一个用于前进一个步骤，一个用于后退一个步骤。并在模板文件中绑定点击事件。

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

@Component({
  selector: 'app-step',
  templateUrl: './step.component.html',
  styleUrls: ['./step.component.css']
})
export class StepComponent {

  constructor(private router: Router) { }

  goBack() {
    this.router.navigate(['/step'], { queryParams