Question

我正在尝试在一些嵌套的结构指令中访问模板引用：

  <ng-container [ngSwitch]="currentIndex">
      <ng-container *ngFor="let panel of panels; index as panelIndex;">
        <ng-container *ngSwitchCase="panelIndex">
          <ng-container #visiblePanel *ngComponentOutlet="panel; injector: injector"></ng-container>
        </ng-container>
      </ng-container>
  </ng-container>

我尝试通过以下方式引用组件：

  @ViewChild('visiblePanel') currentPanel: WizardPanelComponent;

我还尝试了id和Component选择器。基本上，它始终是未定义的：

  // Button press
  onNext() {
    this.data = this.currentPanel.data;  // this.currentPanel is undefined
    ...
  }

是否可以通过某种方式在ts中获得对当前切换组件的引用？

Answer 1

首先，您不需要ngSwitch。因此，将代码更改为

  <ng-container>
      <ng-container *ngFor="let panel of panels; index as panelIndex;">
        <ng-container *ngIf="panelIndex === currentIndex">
          <ng-container #visiblePanel *ngComponentOutlet="panel; injector: injector"></ng-container>
        </ng-container>
      </ng-container>
  </ng-container>

ngSwitch中的@ViewChild未定义

1 个答案: