我想创建并执行多个动态组件。我想执行列表中存在的所有组件。如果列表中有3个组件可用,则只有一个组件正在执行,该组件出现在最后一个索引上。
我提到this code。
我在right.panel.ts文件中检查此组件是否存在于列表中。如果存在,则我调用特定组件。
但是,问题是只有FreeMemoryComponent从right.panel.ts调用,如果列表中有其他组件aslo。 这里,不要调用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) {
}
}
这里发生了什么? 请帮帮我。
答案 0 :(得分:1)
更改
componentData2 = null;
到
componentData2 = [];
和
this.componentData2 = {
component: HeapMemoryComponent,
inputs: {
showNum: 0
}
};
到
this.componentData2.push({
component: HeapMemoryComponent,
inputs: {
showNum: 0
}
});
和
<app-bottompanel [componentData2]="componentData2" class="row"></app-bottompanel>
到
<app-bottompanel *ngFor="let cd2 of componentData2" [componentData2]="cd2" class="row"></app-bottompanel>