如何使用angular4中的动态内容加载器在同一视图中动态加载两个或多个相同或不同的组件

我正在使用动态加载model.component.ts上的组件。这适用于单个组件加载，但无法查看加载两个相同或不同组件的情况。 如何使用来加载两个相同或不同的组件？ 注意：我已经在代码中明确标记了问题所在的位置

服务台 Dynamic.content-loader.ts 要添加组件，请执行以下操作：

addComponent(){
  // check and resolve the component
  var comp = this._cfr.resolveComponentFactory(YourComponent);
  // Create component inside container
  var forFurtheruse = this.container.createComponent(comp);      
}

---

使用工作plunker示例

。如果可能，介绍如何使用此选择器加载两个组件（相同或不同）。这两个组件不应该重叠。您可以尝试使用

，并根据ConditionsHanks@Ali路由必要的组件，但在我上面的方法中仍然存在错误。

  componentData = [];

  ngOnInit() {
    this.jsonDataService.jsondta().subscribe(
      data => this.jsdata = data
    );
  }
  //after a click event in some other component below method is called
  showDialog(){
for(let i=0; i<2;i++){   //calling component two times to create components twice.
      this.displayshiftChartComponent(this.jsdata);
}
    }

  displayshiftChartComponent(jsdata) {
    this.componentData[index] = {
      component: CustomShiftChartComponent,
      inputs: {
       shiftData: [
          {
            shiftdata: this.jsdata     
          }
        ]
      }
    };
  }

<!-- here loading components dynamically.
     Need to load two or more same components
       or different components here. -->
<!-- need to do something here -->

<div class="col-xs-6">
     <!-- first component load here -->
     <app-dynamic-content-loader [componentData]="componentData[0]">
     </app-dynamic-content-loader>
</div>
<div class="col-xs-6">
     <!-- second component should load here -->
     <app-dynamic-content-loader [componentData]="componentData[1]">
     </app-dynamic-content-loader>
</div>

export class CustomShiftChartComponent implements OnInit, AfterContentInit, AfterContentChecked {
 constructor(el: ElementRef, public injector: Injector) {
    this.el = el;
    try {
      this.shiftdata = this.injector.get('shiftData')[0].shiftdata;
      this.gridStatus = true;
    } catch (e) {
      console.log('Error Occured :: ' + e.status);
    }
    if (this.gridStatus === true) {
      alert(this.gridStatus);
      this.shiftdata = this.shiftdata;
      console.log(this.shiftdata);
    }

  ngAfterContentInit() {

  }

}

 import { Component, OnInit, ComponentFactoryResolver, 
    ReflectiveInjector, ViewContainerRef, ViewChild, Input } from 
    '@angular/core';
    import { CustomShiftChartComponent } from '../components/------';
    import { hellotComponent } from '../hello/-------';

    @Component({
      selector: 'app-dynamic-content-loader',
      templateUrl: './dynamic-content-loader.component.html',
      styleUrls: ['./dynamic-content-loader.component.css'],
      entryComponents: [CustomShiftChartComponent,hellotComponent]
    })
    export class DynamicContentLoaderComponent implements OnInit {
      currentComponent = null;
      @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

      ngOnInit(): void {
      }



      // component: Class for the component you want to create
      // inputs: An object with key/value pairs mapped to input name/input value
      @Input() set componentData(data: { component: any, inputs: any }) {
        // console.log("Component Data :: "+JSON.stringify(data));
        if (!data) {
          return;
        }
        // Inputs need to be in the following format to be resolved properly
        let inputProviders = Object.keys(data.inputs).map((inputName) => ({ provide: inputName, useValue: data.inputs[inputName] }));
        const resolvedInputs = ReflectiveInjector.resolve(inputProviders);

        // We create an injector out of the data we want to pass down and this components injector
        const injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector);

        // We create a factory out of the component we want to create
        const factory = this.resolver.resolveComponentFactory(data.component);

        // We create the component using the factory and the injector
        const component = factory.create(injector);

        // We insert the component into the dom container
        this.dynamicComponentContainer.insert(component.hostView);

        // We can destroy the old component is we like by calling destroy
        if (this.currentComponent) {
          this.currentComponent.destroy();
        }

        this.currentComponent = component;
      }

      constructor(private resolver: ComponentFactoryResolver) {

      }

    }

addComponent(){
  // check and resolve the component
  var comp = this._cfr.resolveComponentFactory(YourComponent);
  // Create component inside container
  var forFurtheruse = this.container.createComponent(comp);      
}