Как создать новый компонент, используя viewcontainerref?

Question

Мой шаблон ng в master. html выглядит следующим образом:

<div class="tab-content" >
            <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>
        </div>

и в моем master.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);


  }

  }
}

My Проблема в том, что когда я нажимаю на второй компонент, он создается и отображается. Но чуть ниже первого компонента. Мое требование заключается в том, что второй компонент должен быть создан новым способом ie независимо от положения первые компоненты и наоборот. Любая помощь.

Answer 1

Есть несколько способов понять вашу проблему.

1. Вы хотите очистить все компоненты, присутствующие в вашем ViewContainerRef, прежде чем добавлять другие. Вам нужно будет почистить контейнер:

this.componentLoader.clear();

Вы хотите хранить все свои компоненты в контейнере. Вам придется справиться с этим с помощью CSS, не более того.

Надеюсь, что вам немного помогли, до скорой встречи!