要实现在Angular中一步中显示多个组件，可以使用Angular的路由功能和路由守卫来实现。

首先，创建一个父组件，用于显示多个子组件。在父组件的模板中，使用标签来显示子组件。同时，定义一个步骤计数器，用于控制显示的子组件。

父组件的模板示例：

上一步
下一步

在父组件的控制器中，定义路由路径和对应的组件，以及控制步骤计数器的逻辑。使用路由守卫来控制导航到不同的步骤。

父组件的控制器示例：

import { Component } from '@angular/core';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements CanActivate {

  currentStep: number = 1;

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 根据步骤计数器控制导航到不同的步骤
    if (state.url === '/step1' && this.currentStep !== 1) {
      this.router.navigate(['/step' + this.currentStep]);
      return false;
    }
    if (state.url === '/step2' && this.currentStep !== 2) {
      this.router.navigate(['/step' + this.currentStep]);
      return false;
    }
    if (state.url === '/step3' && this.currentStep !== 3) {
      this.router.navigate(['/step' + this.currentStep]);
      return false;
    }
    return true;
  }

  previousStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.router.navigate(['/step' + this.currentStep]);
    }
  }

  nextStep() {
    if (this.currentStep < 3) {
      this.currentStep++;
      this.router.navigate(['/step' + this.currentStep]);
    }
  }

}

接下来，创建多个子组件，并在父组件的控制器中定义路由路径和对应的组件。需要注意的是，子组件需要实现CanActivate接口，并在canActivate方法中进行步骤校验。

子组件的控制器示例：

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

@Component({
  selector: 'app-step1',
  template: '
步骤1
',
})
export class Step1Component implements CanActivate {

  canActivate() {
    // 在此进行步骤1的校验逻辑
    return true;
  }

}

@Component({
  selector: 'app-step2',
  template: '
步骤2
',
})
export class Step2Component implements CanActivate {

  canActivate() {
    // 在此进行步骤2的校验逻辑
    return true;
  }

}

@Component({
  selector: 'app-step3',
  template: '
步骤3
',
})
export class Step3Component implements CanActivate {

  canActivate() {
    // 在此进行步骤3的校验逻辑
    return true;
  }

}

最后，在父组件的路由配置中，将子组件和对应的路由路径进行关联。

路由配置示例：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { Step1Component, Step2Component, Step3Component } from './step-components';

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      { path: 'step1', component: Step1Component, canActivate: [ParentComponent] },
      { path: 'step2', component: Step2Component, canActivate: [ParentComponent] },
      { path: 'step3', component