TypeError：尝试动态生成组件时，this.componentLoader.toArray不是函数

Question

我正在尝试使用viewcontainerref动态生成组件。 我在masters.html文件中的ng模板定义如下：

<div class="tab-pane fade show" role="tabpanel" *ngFor="let tab of tabs" [id]="tab.itemName" [ngClass]="{ 'active': activeItem == tab.itemName}">
                <ng-template #appComponentLoader>
                </ng-template>
            </div>

其中定义的指令appComponentLoader指令如下：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appComponentLoader]'
})
export class ComponentLoaderDirective {

  constructor(public viewContainerRef:ViewContainerRef) { }

}

我的masters.component.ts如下：

import { SecondComponentComponent } from './../second-component/second-component.component';
import { FirstComponentComponent } from './../first-component/first-component.component';
import { ComponentLoaderDirective } from './../../component-loader.directive';
import { Component, OnInit, ComponentFactoryResolver, ViewChild, QueryList, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-masters',
  templateUrl: './masters.component.html',
  styleUrls: ['./masters.component.css']
})
export class MastersComponent implements OnInit {
  masterMenuItems = [
    { itemName: "Countries", displayName: "First Component",Component:FirstComponentComponent },
    { itemName: "ClientLocations", displayName: "Second Component",Component:SecondComponentComponent},
     ];

  @ViewChild('appComponentLoader', {read: ViewContainerRef}) componentLoader;
  activeItem: string;
  tabs=[];


  constructor(public componentFactoryResolver:ComponentFactoryResolver) { }

  ngOnInit(): void {
  }

  menuItemClick(clickMasterMenu:any){
    //console.log(clickMasterMenu)

    this.activeItem=clickMasterMenu.itemName;
    let matchingTabs=this.tabs.filter((tab)=>{
      return tab.itemName == clickMasterMenu.itemName;

    }

    )


    if (matchingTabs.length == 0)
    {
      this.tabs.push({
        tabIndex:this.tabs.length,
        itemName:clickMasterMenu.itemName,
        displayName:clickMasterMenu.displayName

      });

    setTimeout(() => {
      console.log(this.componentLoader)
      var componentLoadersArray = this.componentLoader.toArray();
      var componentFactory = this.componentFactoryResolver.resolveComponentFactory(clickMasterMenu.Component);
      var viewContainterRef = componentLoadersArray[this.tabs.length - 1].viewContainerRef;
      viewContainterRef.createComponent(componentFactory);
    }, 100);
    // setTimeout(()=>{
    //   console.log(this.componentLoader);
    //   //var componentLoaderArray=this.componentLoader.toArray();

    //   var componentFactory=this.componentFactoryResolver.resolveComponentFactory(clickMasterMenu.Component);
    //   var ref=this.componentLoader.createComponent(componentFactory);

    //   // var viewcontainerref=this.componentLoader.viewContainerRef
    //   // viewcontainerref.createComponent(componentFactory);
    // },100);


  }

  }
}

每当我运行代码时，我都会收到如下错误： core.js：6185错误TypeError：this.componentLoader.toArray不是函数 在masters.component.ts

有人可以帮忙吗？