如何使用模板驱动形式将角度路由与角度材料步进器（https://material.angular.io/components/stepper/overview）结合起来？

Posted 2023-03-13

【中文标题】如何使用模板驱动形式将角度路由与角度材料步进器（https://material.angular.io/components/stepper/overview）结合起来？

【英文标题】：How to combine angular routing with angular material stepper(https://material.angular.io/components/stepper/overview) using template driven form?

【发布时间】：2020-07-24 18:17:19

【问题描述】：

我想在 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
                    

父组件1.html =>

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

它不工作。是否有任何替代方法或需要添加的东西才能使其工作？

【参考方案1】：

您可以在组件的同一页面中拥有路由器插座和步进器 像这样

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

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

然后在步进器组件中，您可以通过在路由器中添加(click)事件来使步进器组件每一步都进行路由器更改，然后调用受尊重的路由

您可以查看APIAPI 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    
  

【讨论】：

你能分享一个解决方案吗，因为我已经尝试过了，但是当我尝试实现它时，我将无法获得所需的输出。

答案中添加了“是”