我正在构建一个静态分析组件的应用程序（来自角度应用程序），并将它们呈现在一个角度应用程序中，类似于样式指南，但有更多信息，其中包含有关输入和组件的其他方面的信息等。
该应用程序使用webpack并分析组件并返回有关组件的“前端”（另一个角度应用程序）信息，包括其源代码，我想在该应用程序中呈现此组件。
动态组件加载器要求您已导入组件并引用它（类型），这是我没有的，因为此信息在运行时传递给应用程序。
我对如何渲染这个问题有点困惑，angular2是否有某种机制可以从字符串中编译？使用某种代码生成，或者可能有更好的方法来实现它？
为了更清楚，我有：
{
"id": 0,
"name": "carte-blanche-angular2",
"kind": 0,
"flags": {},
"children": [
{
"id": 1,
"name": "\"component\"",
"kind": 1,
"kindString": "External module",
"flags": {
"isExported": true
},
"originalName": "node_modules/carte-blanche-angular2/tmp/component.ts",
"children": [
{
"id": 2,
"name": "NameComponent",
"kind": 128,
"kindString": "Class",
"flags": {
"isExported": true
},
"decorators": [
{
"name": "Component",
"type": {
"type": "reference",
"name": "Component"
},
"arguments": {
"obj": "{\n selector: 'cb-name', // <name></name>\n styles: [`\n div{\n color: red; \n font-style:italic;\n }\n `],\n // The template for our name component\n template: `\n <div>name : {{name}}</div>\n `\n}"
}
}
],
"children": [
{
"id": 4,
"name": "constructor",
"kind": 512,
"kindString": "Constructor",
"flags": {
"isExported": true
},
"signatures": [
{
"id": 5,
"name": "new NameComponent",
"kind": 16384,
"kindString": "Constructor signature",
"flags": {},
"type": {
"type": "reference",
"name": "NameComponent",
"id": 2
}
}
]
},
{
"id": 3,
"name": "name",
"kind": 1024,
"kindString": "Property",
"flags": {
"isExported": true
},
"decorators": [
{
"name": "Input",
"type": {
"type": "reference",
"name": "Input"
},
"arguments": {}
}
],
"type": {
"type": "instrinct",
"name": "string"
}
}
],
"groups": [
{
"title": "Constructors",
"kind": 512,
"children": [
4
]
},
{
"title": "Properties",
"kind": 1024,
"children": [
3
]
}
]
}
],
"groups": [
{
"title": "Classes",
"kind": 128,
"children": [
2
]
}
]
}
],
"groups": [
{
"title": "External modules",
"kind": 1,
"children": [
1
]
}
]
}
生成的typedoc是哪个：
"{
"id": 0,
"name": "carte-blanche-angular2",
"kind": 0,
"flags": {},
"children": [
{
"id": 1,
"name": "\"component\"",
"kind": 1,
"kindString": "External module",
"flags": {
"isExported": true
},
"originalName": "node_modules/carte-blanche-angular2/tmp/component.ts",
"children": [
{
"id": 2,
"name": "NameComponent",
"kind": 128,
"kindString": "Class",
"flags": {
"isExported": true
},
"decorators": [
{
"name": "Component",
"type": {
"type": "reference",
"name": "Component"
},
"arguments": {
"obj": "{\n selector: 'cb-name', // <name></name>\n styles: [`\n div{\n color: red; \n font-style:italic;\n }\n `],\n // The template for our name component\n template: `\n <div>name : {{name}}</div>\n `\n}"
}
}
],
"children": [
{
"id": 4,
"name": "constructor",
"kind": 512,
"kindString": "Constructor",
"flags": {
"isExported": true
},
"signatures": [
{
"id": 5,
"name": "new NameComponent",
"kind": 16384,
"kindString": "Constructor signature",
"flags": {},
"type": {
"type": "reference",
"name": "NameComponent",
"id": 2
}
}
]
},
{
"id": 3,
"name": "name",
"kind": 1024,
"kindString": "Property",
"flags": {
"isExported": true
},
"decorators": [
{
"name": "Input",
"type": {
"type": "reference",
"name": "Input"
},
"arguments": {}
}
],
"type": {
"type": "instrinct",
"name": "string"
}
}
],
"groups": [
{
"title": "Constructors",
"kind": 512,
"children": [
4
]
},
{
"title": "Properties",
"kind": 1024,
"children": [
3
]
}
]
}
],
"groups": [
{
"title": "Classes",
"kind": 128,
"children": [
2
]
}
]
}
],
"groups": [
{
"title": "External modules",
"kind": 1,
"children": [
1
]
}
]
}"
我提到的字符串是什么。
谢谢，
祝你好运 Joao Garin
答案 0 :(得分：1)
您可以将此组件索引为服务中的字符串，如下所示：
export class ComponentIndexerService{
private clazzNames: Array<string>;
classes: Array<new (...args:any[]) => any>
public registerComponent(componentName : string, componentClass : new (...args[]) => any)
{
this.classNames.push(componentName);
this.classes.push(componentClass);
}
}
public get(componentName : string) {
let index : number = this.classNames.indexOf(componentName);
if(index > -1) {
return this.classes[index];
}
}
然后注册：
componentIndexerService.register("someName", ComponentClass);
componentIndexerService.register("someName2", ComponentClass2);
componentIndexerService.register("someName3", ComponentClass3);
最后使用：
constructor(dcl: DynamicComponentLoader, viewContainerRef: ViewContainerRef, componentIndexerService : ComponentIndexerService) {
let clazz : (...args:[]) => any = componentIndexerService.get("someName");
dcl.loadNextToLocation(clazz, viewContainerRef);
}