角2の動的コンポーネントが実行されていません

Question

複数の動的コンポーネントを作成して実行します。リストにあるすべてのコンポーネントを実行したいリストに3つのコンポーネントがある場合、最後のインデックスに存在するコンポーネントは1つだけ実行されています。

私はthis codeを参照しました。

このコンポーネントがリストに存在するかどうかは、right.panel.tsファイルにチェックインしています。存在する場合、私は特定のコンポーネントを呼び出しています。

しかし、ここで問題は、リストに他のコンポーネントがある場合、right.panel.tsからFreeMemoryComponentが呼び出すことだけです。 ここでは、HeapMemoryComponent、DiskSpaceCOmponent、CpuUsageComponentは呼び出されません。

App.module.ts

import..... 

@NgModule({ 
declarations: [ 
AppComponent, 
HeapMemoryComponent, 
DiskSpaceComponent, 
CpuUsageComponent, 
FreeMemoryComponent, 
BottomPanelDynamicComponent 
], 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
MaterialModule.forRoot(), 
DndModule.forRoot(), 
routing 
], 
providers: [.....], 
bootstrap: [AppComponent], 
entryComponents:[...], 
exports: [...] 
}) 
export class AppModule { } 

私は、ファイルを以下からコンポーネントを呼んでいます。

right.panel.ts

import { Component, OnInit } from '@angular/core'; 
import {HeapMemoryComponent} from '../heap-memory-graph/heap-memory-graph.component'; 
import {DiskSpaceComponent} from '../disk-space-graph/disk-space-graph.component'; 
import {CpuUsageComponent} from '../cpu-usage-graph/cpu-usage-graph.component'; 
import {FreeMemoryComponent} from '../free-memory-graph/free-memory-graph.component'; 

@Component({ 
    selector: 'app-rightpanel', 
    templateUrl: './rightpanel.component.html', 
    styleUrls: ['./rightpanel.component.css'] 
}) 
export class RightpanelComponent implements OnInit { 
componentData2 = null; 
constructor(private savedWidgetService:GetSavedWidgetService) {} 

ngOnInit() { 
    this.service.getSavedWidget().subscribe(lst => { 
     for (var v in lst) { 
     if (lst[v].name == "Heap Memory") { 
      this.componentData2 = { 
      component: HeapMemoryComponent, 
      inputs: { 
       showNum: 0 
      } 
      }; 
     } else if (lst[v].name == "Disk Space") { 
      this.componentData2 = { 
      component: DiskSpaceComponent, 
      inputs: { 
       showNum: 0 
      } 
      }; 
     } else if (lst[v].name == "CPU Usage") { 
      this.componentData2 = { 
      component: CpuUsageComponent, 
      inputs: { 
       showNum: 0 
      } 
      }; 
     } else if (lst[v].name == "Free Memory") { 
      this.componentData2 = { 
      component: FreeMemoryComponent, 
      inputs: { 
       showNum: 0 
      } 
      }; 

     } 
     } 
    } 
    } 
    } 

right.panel.html

<app-bottompanel [componentData2]="componentData2" class="row"></app-bottompanel> 

し、ファイルを次のように私が作成し、動的コンポーネントを実行しています。

import {Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '@angular/core'; 
import {HeapMemoryComponent} from '../heap-memory-graph/heap-memory.component'; 
import {DiskSpaceComponent} from '../disk-space-graph/disk-space.component'; 
import {CpuUsageComponent} from '../cpu-usage-graph/cpu-usage.component'; 
import {FreeMemoryComponent} from '../free-memory-graph/free-memory.component'; 

@Component({ 
    selector: 'app-bottompanel', 
    entryComponents[HeapMemoryComponent,DiskSpaceComponent,CpuUsageComponent,FreeMemoryComponent], 
    template: `<div #dynamicComponentContainer></div>`, 
}) 
export default class BottomPanelDynamicComponent { 
    currentComponent2 = null; 

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

    // component: Class for the component you want to create 
    // inputs: An object with key/value pairs mapped to input name/input value 
@Input() set componentData2(data: {component: any, inputs: any }) { 
if (!data) { 
    return; 
} 

// Inputs need to be in the following format to be resolved properly 
let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};}); 
let resolvedInputs = ReflectiveInjector.resolve(inputProviders); 

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

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

// We create the component using the factory and the injector 
let 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.currentComponent2) { 
    //this.currentComponent.destroy(); 
} 

this.currentComponent2 = component; 
} 

constructor(private resolver: ComponentFactoryResolver) { 

} 
} 

何が起こっているのですか？ 私を助けてください。

 this.componentData2.push({ 
     component: HeapMemoryComponent, 
     inputs: { 
      showNum: 0 
     } 
     }); 

へ

Answer 1

変更

componentData2 = null; 

へ

componentData2 = []; 

と

 this.componentData2 = { 
     component: HeapMemoryComponent, 
     inputs: { 
      showNum: 0 
     } 
     }; 

と

<app-bottompanel [componentData2]="componentData2" class="row"></app-bottompanel> 

Zochbauer

<app-bottompanel *ngFor="let cd2 of componentData2" [componentData2]="cd2" class="row"></app-bottompanel>