Question

我是Angular的新手，我想使用Angular构建一个多步骤向导。

该要求基本上是为了促进应用程序中商店卡的申请过程。我需要开发3个进程/ 3个多步向导。

所以我目前的解决方案是：

我已经构建了8个共享Angular组件，代表了该过程中的不同步骤，我想使用Angular在3个多步骤向导中使用这些共享组件。

作为一个例子，我按照以下方式完成了第一个多步骤：

我创建了一个父组件：

HA status:\W*(.*)

我在路由器插座事件中使用OnActivate：

<div class="steps-form col s11">
   <div class="steps-row setup-panel">
       <div class="steps-step" *ngFor="let step of wizManager.Steps">
            step.StepName
       </div>
   </div>
</div>
<div class="card-content" >
<router-outlet (activate)="onActivate($event)">
</router-outlet>
</div>

在父母中，我有一个服务，用于验证下一步的每一步：

onActivate(componentRef: any) {
        this.currentComponent = componentRef;
}

我使用该服务来跟踪每个步骤并进行验证。然后我使用上面的ComponentRef来设置/获取每个子组件的任何值。

MultiStep的路由如下：

next(step: WizardStepDTO) {
        this._slimLoadingBarService.start();
        this.loadingControl.showloading();

        //Validate Current Step first 
        if (step.RequiresValidation) {
            this.ValidateCurrentStep(step, this.currentComponent);
        }

        //save data
        if (step.ValidationResult.FormStepState == StepState.ValidAndReadyForProcessing) {
            this.ProcessCurrentStep(step, this.currentComponent);
        }

        if (step.ValidationResult.FormStepState == StepState.Complete) {

            var newStep = this.wizManager.Steps.filter(item => item.StepId === step.StepId + 1)[0];

            //set current step to next step
            this.wizManager.CurrentStep = newStep;


                this.router.navigate([newStep.StepView]);

        this._slimLoadingBarService.complete();
        this.loadingControl.hideloading();
    }

毕竟，我的问题是：

在我开始使用后端之前，在Angular中有更好的方法吗？我很想知道如何验证每个孩子。
在步骤之间导航的最佳方式是什么？目前我正在使用const routes: Routes = [ { path: 'parent', component: ParentComponent, canLoad: [CanLoadGuard], children: [ { path: '', redirectTo: 'step1', pathMatch: 'full' }, { path: 'step1', component: Step1Component }, { path: 'step2', component: Step2Component }, { path: 'step3', component: Step3Component } ] } ];，但我不确定是否有更好的方法。
我想在用户导航时保存向导的状态，如果用户中途停止，我想从他们停止的位置加载它。如果可能，有人可以建议一种有效的方法。

构建Angular多步向导的最佳方法是什么？

0 个答案: