Question

我正在尝试动态地（在运行时）添加DOM中的新节点。新节点基本上是组件选择器。问题是组件的内容没有呈现，因此结果只是空HTML标签。

我正在使用Angular 2.0 Documentation示例并对其进行了一些修改以显示案例。

我所做的就是重复使用代码，当我点击正文以创建新的销售税元素时。显然它不起作用。

这是我在body身上添加的新脚本元素。

<script>
  function add(){
     var element = document.createElement('sales-tax');
    document.getElementsByTagName("my-app")[0].appendChild(element);
  }
</script>

并在单击正文后调用该函数。

 <body onclick="add()">
    <my-app>Loading...</my-app>
 </body>

这是结果。正如您所看到的那样，已添加到模板运行时的销售税已呈现，但我在运行时添加的销售税为空。

Answer 1

Angular渲染dom以生成实际的DOM，并使用Zone.js绑定它们，这只是单向的，不会检测到对DOM的更改。
只有在Zone.js范围内运行时，Angular才会检测到更改。
然后还有其他的interanl绑定和生成过程，以使组件实际工作并与应用程序的其余部分绑定。
要实现您尝试做的事情，您必须使用DynamicComponetLoader作为@echonax提及，但因为已弃用现在，您应该使用ViewContainerRef.createComponent()代替。

有关实施，请参阅THIS Answer或@Gunter＆＃39; PLUNKER（希望他不介意。）

Answer 2

createComponent()版本：Plunker

this.resolver.resolveComponent(HeroListComponent).then((factory:ComponentFactory<any>) => {
      this.cmpRef = this.theBody.createComponent(factory)
    });

beta.17（已弃用）版本.loadNextToLocation()：Plunker(deprecated)

 addCmp(){
    console.log('adding');
    this.dcl.loadNextToLocation(HeroListComponent, this.theBody);
  }

您不是在创建一个组件，而只是创建一个html元素并将其附加到与组件选择器具有相同名称的DOM中。

为了实现您的目标，您必须使用DynamicComponentLoader。

在运行时在Angular 2中向DOM添加新的Component元素不会渲染组件

2 个答案: