Как объединить angular маршрутизацию с angular материальным степпером (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>

, тогда вы можете определить маршруты в компоненте розетки маршрутизатора.

Затем в компоненте степпера Вы можете сделать шаговый компонент на каждом шаге для изменения маршрутизатора, добавив событие (click) в маршрутизатор, а затем вызвать соответствующий маршрут

Вы можете проверить API API 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    
  }