«Многошаговая» форма входа в 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-шаблона, которая будет содержать компоненты, которые необходимо изменить на каждом этапе входа в систему

    @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