Compile a template based on a nested configuration

Question

Is there a way to dynamically create a template for a component based on the value of the entered service?

Angular 2.0.0-beta.7

Scenario: I get json containing nested components. I process these components (recursively) using DynamicComponentLoader. Here I add user data to the components.

In this case, I have something like “Layout-Component” that gets the configuration containing the configuration for the layout (1 row - three columns)

The code looks something like this:

    {
      "components": {
        "name": "Layout",
        "root": true,
        "params": {
          "cols": "3"
        },
        "children": [
          {
            "name": "Navigation",
            "position": "pos1",
            "children": [{...}]
          },
          {
            "name": "Content",
            "position": "pos2"
          },
          {
            "name": "Sidebar",
            "position": "pos3"
          }
        ]
      }
    }

    @Component({
      selector: 'df-layout',
      template: "<div>?</div>"
    })
    export class DfLayout {

      constructor(@Inject('layoutConfig') layoutConfig) {
        //layoutConfig ===> {cols: 3}

        let templateString = renderTemplate(layoutConfig);

        //TODO
        //compile templateString and replace template so that template variables (#pos1, ...) can be used

   /* 
    <div class="row">
      <div class="col-4" #pos1></div>
      <div class="col-4" #pos2></div>
      <div class="col-4" #pos3></div>
    </div>
    */

      }
    }

, html . , "". [innerHTML] div , childComponents DynamicComponentLoader.loadIntoLocation(...)

?

Answer 1

, @Component , DOM. : NavigationComponent, ContentComponent ..

ngOnInit:

Type type;
if(children.name === 'Navigation') {
 type = NavigationComponent;
}if(children.name === 'Content') {
 type = ContentComponent;
}
dynamicComponentLoader.loadIntoLocation(type,this.elementRef,'anyRef');

Answer 2

, , alexpods :

• $ Angular 2