Angular 2 - 從字符串中動態加載組件

Question

我正在構建一個靜態分析組件（來自角度應用程序）並將它們呈現在角度應用程序中的應用程序，類型爲樣式指南，但具有更多信息輸入和組件等的其他方面。

該應用程序使用webpack和分析一個組件，並返回到一個組件的「前端」（另一個角度的應用程序）信息，包括其源代碼，我想渲染這個組件該應用程序。

動態組件加載程序要求您導入組件並引用它（Type），這是我沒有的，因爲此信息在運行時傳遞給應用程序。

我有點卡在如何渲染這個，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 
     ] 
    } 
] 
}" 

這是我所提到的字符串。

感謝，

問候 若昂·加林

Answer 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); 
}