通过ngSwitch在组件之间切换

Question

我有一个与ngSwitch更改组件有关的小问题。

我的组件之一专用于编辑某些实体，但是该实体可以具有不同的类型。因此，我创建了类似于调度程序的解决方案，当对象类型等于1时，我将打开组件A，否则打开组件B。

但是当我在一种类型之间切换时，什么也不会发生，当前元素又回到第一位（控制台是干净的，我没有错误；-(）。

我还尝试了分离视图和检测更改的方法，但仍然无法正常工作。我陷入了陷阱，我倒了杯好咖啡来寻求帮助。谢谢！

HTML：

<ng-container *ngIf="!item">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-container>

<mat-card *ngIf="item">
  <div>
      <mat-slider style="margin-top: 20px;" color="primary" [value]="currentIndex + 1" tickInterval="1" thumbLabel [displayWith]="formatLabel"
        min="1" [max]="item.questions.length" (input)="sliderValueChanged($event)"></mat-slider>

    <div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <button mat-button color="primary" type="button" [disabled]="true">
          <mat-icon aria-label="Example icon-button with a heart icon">menu</mat-icon>
        </button>
        <button mat-button color="primary" type="button" [disabled]="!hasPrevious" (click)="previous()">
          <mat-icon aria-label="Example icon-button with a heart icon">chevron_left</mat-icon>
        </button>
        <button mat-button color="primary" type="button" [disabled]="!hasNext" (click)="next()">
          <mat-icon aria-label="Example icon-button with a heart icon">chevron_right</mat-icon>
        </button>
      </div>
    </div>

    <div class="type-box">
      <mat-icon>class</mat-icon>
      <span class="type-box-text">{{ item.name }} | {{ 'QUESTION_TYPE' | translate }} -
        {{ currentQuestion.type | questionType}}</span>
    </div>

    <ng-container [ngSwitch]="currentQuestion.type" #questionViewContainer>
      <app-test-question-create-or-update-closed *ngSwitchCase="1" 
          [questionCategory]="questionCategory" 
          [item]="item"
          [command]="currentQuestion" 
          [isUpdate]="true"></app-test-question-create-or-update-closed>
        <app-test-question-create-or-update-fill-fields *ngSwitchCase="2"
          [questionCategory]="questionCategory" 
          [item]="item" 
          [command]="currentQuestion" 
          [isUpdate]="true"></app-test-question-create-or-update-fill-fields>
    </ng-container>
  </div>
</mat-card>

打字稿：

import { Component, OnInit, HostListener, Output, Input, TemplateRef, ViewChild, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
import { QuestionService } from 'src/app/domain/services/question.service';
import { DetailsComponentBase } from 'src/app/components/base.details.component';
import { ActivatedRoute } from '@angular/router';
import { UiService } from 'src/app/framework/ui/ui.service';
import { UserService } from 'src/app/domain/services/user.service';
import { AuthService } from 'src/app/domain/services/auth.service';
import { BreakpointObserver } from '@angular/cdk/layout';
import { Guid } from 'src/app/framework/structs/guid.struct';
import { Test } from 'src/app/domain/models/test.model';
import { TestService } from 'src/app/domain/services/test.service';
import { FullUpdateQuestionCommand } from 'src/app/domain/commands/tests/questions/full-update-question.command';
import { Question } from 'src/app/domain/models/question.model';
import { ClosedQuestion } from 'src/app/domain/models/question-closed.model';
import { KeyCode } from 'src/app/framework/structs/key-code.enum';

@Component({
  selector: 'app-test-question-full-update',
  templateUrl: './test-question-full-update.component.html',
  styleUrls: ['./test-question-full-update.component.scss']
})
export class TestQuestionFullUpdateComponent extends DetailsComponentBase<Test> {
  public currentQuestion: FullUpdateQuestionCommand;
  public isValid: boolean;

  @ViewChild('questionViewContainer', {read: ViewContainerRef}) questionViewContainer: ViewContainerRef;

  private _questionId: Guid;

  constructor(
    private _ref: ChangeDetectorRef,
    private _testService: TestService,
    private _questionService: QuestionService,
    private _router: ActivatedRoute,
    uiService: UiService,
    userService: UserService,
    authService: AuthService,
    breakpointObserver: BreakpointObserver) {
      super(_testService, uiService, userService, authService, breakpointObserver);
  }

  public ngOnInit() {
    super.ngOnInit();

    console.log('sss');
  }

  public ngOnDestroy() {
    super.ngOnDestroy();
  }

  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {

    if (!this.uiService.keyboardArrowsEnabled) return;

    if (event.keyCode === KeyCode.RightArrow) {
      if (this.hasNext) {
        this.next();
      }
    }

    if (event.keyCode === KeyCode.LeftArrow) {
      if (this.hasPrevious) {
        this.previous();
      }
    }
  }

  public sliderValueChanged(event: any) {
    this.currentQuestion = this.item.questions[event.value - 1];
  }

  public get hasNext(): boolean {
    return this.currentIndex < this.item.questions.length - 1;
  }

  public get hasPrevious(): boolean {
    return this.currentIndex > 0;
  }

  public next() {
    this.currentQuestion = this.item.questions[this.currentIndex + 1];
  }

  public previous() {
    this.currentQuestion = this.item.questions[this.currentIndex - 1];

  }

  private changeQuestion(index: number) {
    this.currentQuestion = this.item.questions[index];
  }

  public get currentIndex(): number {
    return this.item.questions.indexOf(this.currentQuestion as Question);
  }

  public getItemId(): Guid {
    this._questionId = this._router.snapshot.paramMap.get('questionId');
    return this._router.snapshot.paramMap.get('testId');
  }

  public beforeItemSet(item: Test) {
  }

  public itemLoaded(item: Test) {
    this.currentQuestion = this.item.questions.find(x => x.id === this._questionId);
    item.questions.sort((x, y) => x.order - y.order);
  }

  public commitClick() {
    this._questionService.update(this.currentQuestion);
  }
}