Question

有没有办法根据注入的服务的值动态创建组件的模板？

Angular 2.0.0-beta.7

情景： 我得到一个包含嵌套组件的json。我使用DynamicComponentLoader渲染这些组件（递归）。在这里，我将自定义数据注入组件。

在这种情况下，我有类似“布局组件”的东西，它获取包含布局配置的配置（1行 - 3列）

代码看起来像这样：

    {
      "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。但我不知道如何“编译”它。只是将它传递给根div的[innerHTML]不能完成这项工作，因为我需要使用本地模板变量来使用DynamicComponentLoader.loadIntoLocation(...)

渲染childComponents

有没有办法编译模板字符串并在当前模板中使用它？

Answer 1

也许你可以为你可能必须在DOM中插入的每个孩子创建一个@Component。例如：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基于虚假组件的答案：

Equivalent of $compile in Angular 2

根据注入的配置编译模板

2 个答案: