如何使用模板驱动的形式将角铣削与角材料步进器（https://material.angular.io/components/stepper/overview）结合在一起？

Question

我想使用模板驱动的形式通过自己的路由在Angular Material Stepper（https://material.angular.io/components/stepper/overview）的每个步骤上加载新组件。可以请任何人帮我吗？

例如：我有这样的路由：

{
                path: 'parent',
                component: Parentcomponent1,
                children: [
                    {
                        path: '',
                        redirectTo: 'child1',
                        pathMatch: 'full'
                    },
                    {
                        path: 'child1',
                        component: child1Component
                    },
                    {
                        path: 'child2',
                        component: child2Component
                    }
}

Parentcomponent1.html =>

<mat-horizontal-stepper>
  <mat-step [routerLink]="child1"></mat-step>
  <mat-step [routerLink]="child2"></mat-step>
  <router-outlet></router-outlet>
</mat-horizontal-stepper> 

它不起作用。是否有其他替代方法或需要添加一些使其生效？

Answer 1

您可以在组件的同一页面上放置路由器出口和步进器像这样

<stepper></stepper>
<router-outlet><router-outlet>

然后在路由器出口组件中定义路由。

然后在stepper组件中，可以通过在路由器中添加(click)事件，然后调用相应的Route，使stepper组件的每一步更改路由器。>

您可以检查API API of the AngularMaterialStepper

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup" >
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel >
<!--   Call your Router Link this will change the page and bind it in the router outlet -->
        <div (click)='goTO()' [routerLink]="['second']">Fill out your name
        </div>
        </ng-template>

  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<!-- Here is the router outlet -->
<router-outlet></router-outlet>

从html中删除多余的内容>]

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup" >
      <ng-template matStepLabel >
        <div (click)='goTO()' [routerLink]="['first']">Fill out your name
        </div>
        </ng-template>

  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
      <ng-template matStepLabel>
        <div (click)='goTO()' [routerLink]="['second']">Fill out your address
        </div></ng-template>

  </mat-step>
  <mat-step>
    <ng-template matStepLabel>

        <div (click)='goTO()' [routerLink]="['thihrd']">Fill out your address
        </div>
    </ng-template>

  </mat-step>
</mat-horizontal-stepper>

<router-outlet></router-outlet>


然后在TS中
// added a click event to check 

  goTO(){
    alert('ho go to called');
// you can call the route chane here also by this.router.navigate() // <-- call your route here    
  }