angular - Angular Material 2 步进控件

Question

我使用 Angular Material 2 Stepper 设置了一个线性步进器。

我在不同的组件(组件-a、组件-b、组件-c)中有表单。在我的主要容器组件 (container-component) 中，我想要线性步进器在每个组件的形式有效时“步进”它们。

是否有某种功能可以与步进器中的 stepControl 通信以使其正常工作？

我附上了步进器的文档和应用程序的 StackBlitz 版本。此外，还有指向我正在使用的存储库的链接。

Material 步进组件:https://material.angular.io/components/stepper/overview

StackBlitz:https://stackblitz.com/edit/angular-material2-issue-mjmu9u?file=app/app.component.ts

Github:https://github.com/sam11385

Answer 1

我们遇到了完全相同的问题，经过几天的反复试验后找到了可行的解决方案。基本上，由于步骤分为几个组件，每个组件定义一个表单，并且它们对应的 stepControl 必须在父组件中，因此子组件中的 FormGroup 必须发送到定义步进器的父组件。创建 FormGroup 后，发出事件并让父级监听该事件，然后通过该事件传递 FormGroup。您可以将此应用于所有子级，为每个子级创建一个单独的事件，并在父级中为每个发射器创建一个单独的监听器。

在子组件中:

1. 声明事件

   @Output() notify: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();                                                                                                         
   

2. 将 formGroup 发送到父组件

   this.notify.emit(this.myFormGroup);                                                                                                                                                
   

在包含 mat-stepper 的 stepControl(s) 的父组件中:

1. 在组件(.ts)中，添加一个函数来接收和设置表单组:

   myFormGroup: FormGroup;
   onNotify(formGroup: FormGroup): void {
     this.myFormGroup = formGroup;
   }
   

2. 在html中，添加通知监听器:

   <mat-step [completed]="false" [stepControl]="myFormGroup">
     <ng-template matStepLabel>Step 1</ng-template>
     <app-child (notify)='onNotify($event)'></app-child>
   </mat-step>                                                                                                                                            
   

嵌套组件解释:https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/