Javascript 从Angular2项目中Treant js生成的HTML编译指令 TL；博士

我需要使用角度标记对HTML元素进行角度评估/解析，这些元素由treant js动态添加到DOM中

[更新30/09/17] 我遵循了提出的解决方案（包括动态模块/组件创建）。但是，此实现存在越来越多的问题

首先，我向子组件注入为父模块（路由器、ActivateRoute等）声明的所需依赖项：

this.addComponent(
this.treeContainer.nativeElement.outerHTML，
{},
这个.conversation.threads，
这条路线,，
这个路由器，
本网站
);

对我来说，这似乎是错误的，因为最合乎逻辑的方法是将这些依赖性直接注入动态组件（在动态模块中导入），但我无法做到这一点

此外，由于treant js需要直接将它创建的新HTML组件连接到DOM上（我想是为了正确绑定事件），因此我无法在HTML字符串进入DOM之前检索它。因此，我发现的丑陋的修复方法是：

要使用

this.treeContainer.nativeElement.outerHTML

提取HTML字符串（请参见上面的代码片段），然后将其作为动态组件的模板参数发送

由于将有2棵树（因为1.），要删除treant js处理的初始treeContainer:

$（this.treeContainer.nativeElement）.remove（）

那么我们在哪里？ 除了前面提到的问题之外，我尝试过的解决方案根本无法接受。似乎treant js需要将其HTML元素附加到DOM以进行事件绑定和树存储/管理，因此当我复制树的HTML字符串以形成动态组件的模板时，Angular对第二棵树进行了很好的评估，但不再使用treant js框架了（例如：一些功能，如可折叠手柄将不再工作）

总而言之：我无法让Angular和treant js同时处理我的树标记。

此外，我用来避免重复树的丑陋伎俩会导致其他问题，当涉及到重新生成树时，无论是来自动态更新（通过用户交互创建的新节点），还是来自多次导航到同一页面（路由）

最后但并非最不重要的一点，我甚至不能使用一些来自导入模块（例如FormsModule）的角度标记，如

ngModel

：我收到一个错误，说

ngModel

未绑定到输入元素。模块当然是在父组件中导入的，我也尝试在动态模块中导入它：

private addComponent（模板：string，属性：any={}，线程：Thread[]，
路由：ActivateRoute，路由器：router，ws:WebSocketService）{
@组件（{template}）
类TemplateComponent实现OnInit{
//...
@NGD模块({
声明：[TemplateComponent]，
导入：[FormsModule]
})
类TemplateModule{}
const module=this.compiler.compileModuleAndAllComponentsSync（TemplateModule）；
const factory=module.componentFactories.find（componentFactory=>
componentFactory.componentType==模板组件
);
const component=this.container.createComponent（工厂）；
分配（组件实例、属性）；

除非我很快找到一种方法使Angular js和treant js能够顺利地协同工作，否则我可能不得不使用另一个库，比如or。最大的缺点是，我可能会错过一些视觉功能（如树方向）和我发现用treant js很容易实现的交互性

[第一篇文章] 我是Angular2的新手，所以肯定有一些概念我仍然没有正确理解。我在自己的Angular2项目中使用treant js，我一直在让Angular2评估/编译treant js生成的HTML中的指令

我看到了这一点：将treant js集成到项目中，但我只能使用一些静态HTML，而不是

routerLink、ngIf或ngFor

我在组件的

ngInit

中调用buildConversationTree：

buildConversationTree（）{
常量配置={
容器：“#树”，
连接器：{
键入：“步骤”
},
节点：{
HTMLclass:“线程节点”，
可折叠：正确
},
平均间隔：45
};
让treeConfig=this.buildNodes（this.conversation.threads）；
树图取消移位（配置）；
const tree=newtreant（treeConfig，this.ontreeload，$）；
}

基本上，

buildNodes

方法通过调用

nodeHTML

方法为树的每个节点生成HTML：

nodeHTML（数据）{
返回`
，但没有成功，即使从另一个组件导入树也没有解决问题。我猜指令不是直接在模板中编码的，而是由treant js生成的，treant js是在Angular框架之外操纵DOM的第三个库
，但我不确定这个解决方案是否能解决我的问题，老实说，我有点担心它的复杂性
，我尝试手动将视图元素复制/粘贴到组件中具有
ViewContainerRef
成员的命名模板中，但它可以工作