Angular 6中的“多步”登录表单

Question

我正在尝试在Angular 6中创建一个“多步骤”登录表单，该表单将在请求密码之前检查用户名，如下所示：

我只想更改或“重绘”边框内的内容。

我已经搜索并找到了下一个选项：

• 使用ng-switch指令
• 将ViewContainerRef类与ComponentFactoryResolver一起使用
• 使用angular材质的步进器（我没有发现任何隐藏图标的方法）

问题是：哪个更好？还有其他办法吗？

如果可能，我想管理parent组件中的流程。

Answer 1

将ViewContainerRef类与ComponentFactoryResolver一起使用可以很好地解决您要实现的目标。在您看来，与ng-switch相比，这是您要实现的目标的更优雅的解决方案。

基本上，您会按照以下说明进行操作：

LoginModule

    @NgModule({

    declarations: [
        // all your components
    ],
    entryComponents: [
        // components to be loaded at each step
    ],
    imports: [
        CommonModule,
    ]
    })export class LoginModule { }

指令：您为ng-template创建了一个指令，其中包含在每个登录步骤中都需要更改的组件

    @Directive({
      selector: '[appAppsHost]'
    })
    export class AppsHostDirective {
      constructor(public viewContainerRef: ViewContainerRef) { }
    }

LoginService ：此服务应包含一个列表，其中包含要在viewContainerRef中呈现的所有组件，它基本上包含一个返回正确组件的方法：

    getAppComponentItem(componentIdentifier: string): AppComponentItem {
        return this.appComponentItems[componentIdentifier];
    }

ContainerComponent ：然后是您创建容器组件的最后一部分，该容器组件应该包含所需的组件：

@Component({
  selector: 'login-container',
  templateUrl: './login-container.component.html',
  styleUrls: ['./login-container.component.scss']
})
export class LoginContainerComponent implements OnInit {

  @ViewChild(AppsHostDirective) appAppsHost: AppsHostDirective;

  constructor(
    private readonly componentFactoryResolver: ComponentFactoryResolver,
    private readonly loginComponentService: LoginComponentService) {}

  ngOnInit() {

    const viewContainerRef = this.appAppsHost.viewContainerRef;
    const appComponentItem = this.loginComponentService.getAppComponentItem('identifier');
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(appComponentItem.component);
    viewContainerRef.clear();

  }

}

有关更多信息，您可以阅读Angular文档：https://angular.io/guide/dynamic-component-loader