我正在构建一个静态分析组件的应用程序(来自角度应用程序),并将它们呈现在一个角度应用程序中,类似于样式指南,但有更多信息,其中包含有关输入和组件的其他方面的信息等 .
该应用程序使用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
1 回答
您可以将此组件索引为服务中的字符串,如下所示:
然后注册:
最后使用: