TL; DR

我需要使用 dynamically added to the DOM by treant-js 的Angular标记来制作Angular评估/解析HTML元素 .

[更新30/09/17]

我遵循了提议的解决方案there（涉及动态模块/组件创建） . 但是，有 more and more issues with this implementation .

首先，我向子组件注入为父模块声明的所需依赖项（Router，ActivatedRoute等）：

this.addComponent(
  this.treeContainer.nativeElement.outerHTML,
  {},
  this.conversation.threads,
  this.route,
  this.router,
  this.ws
);

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

同时，由于树精-JS需要 directly attach to the DOM 它创建新的HTML组件（我以绑定正确的事件猜），我无法检索HTML字符串它在DOM前 . 所以，我发现 ugly fix 是：

  • 用 this.treeContainer.nativeElement.outerHTML 提取HTML字符串（参见上面的代码片段）然后将其作为 template parameter for the dynamic component 发送;

  • 因为会有2棵树（因为1），要删除由treant-js处理的初始treeContainer： $(this.treeContainer.nativeElement).remove(); .

我们在哪儿？

除了前面提到的问题，我尝试过的解决方案根本不可接受 . 看来，树精，JS需要它的HTML元素附加到DOM事件绑定和树存储/管理，所以当我复制树的HTML字符串，形成动态组件的模板，这第二树 is well evaluated by Angular, but not under treant-js framework anymore （如：一些功能，如可折叠的句柄将不再起作用） .

To sum up: I'm unable to have both Angular and treant-js working at the same time to handle my tree markup.

此外，丑陋伎俩我使用，以避免重复的树木导致其他问题，当谈到重新生成的树，无论是从一个动态更新（新节点通过用户交互创建的），或者从导航到同一页多时间（路线） .

Last but not least ，我甚至无法使用一些角的标记像 ngModel 其中来自导入的模块（例如FormsModule）：我碰到一个错误说 ngModel 未绑定到输入元件 . 该模块当然是在我的父组件中导入的，我也尝试在动态模块中导入它：

private addComponent(template: string, properties: any = {}, threads: Thread[],
                   route: ActivatedRoute, router: Router, ws: WebSocketService) {

@Component({template})
class TemplateComponent implements OnInit {

//...

@NgModule({
  declarations: [TemplateComponent],
  imports: [FormsModule]
})
class TemplateModule {}

const module    = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
const factory   = module.componentFactories.find(componentFactory =>
  componentFactory.componentType === TemplateComponent
);
const component = this.container.createComponent(factory);
Object.assign(component.instance, properties);

除非我很快找到让Angular和treant-js顺利合作的方法，否则我可能不得不使用另一个库，例如angular-tree-component或ng2-tree . 最大的缺点是我可能会错过一些视觉功能（如树的方向）和我发现很容易用treant-js实现的交互性 .

[第一篇文章]

我'm new in Angular2, so there are certainly concepts I still don't正确理解 . 我坚持让Angular2通过treant-js评估/编译生成的HTML中的指令 .

我已经看到了：Integrating Treant-js in Angular2 Project将treant-js集成到项目中，但我只能使用一些静态HTML而不是 routerLink, ngIf or ngFor .

我在我的组件的 ngInit 中调用了buildConversationTree：

buildConversationTree() {
    const config = {
      container: '#tree',
      connectors: {
        type: 'step'
      },
      node: {
        HTMLclass: 'thread-node',
        collapsable: true
      },
      levelSeparation: 45
    };

    let treeConfig = this.buildNodes(this.conversation.threads);
    treeConfig.unshift(config);
    const tree = new Treant(treeConfig, this.onTreeLoaded, $);
  }

基本上， buildNodes 方法通过调用 nodeHTML 方法为树的每个节点生成HTML：

nodeHTML(data) {
    return `
    <div id="thread${data.id}" class="thread-node-wrapper">
      <a class="main-link" routerLink="../thread/${data.id}">
        Lorem ipsum
      </a>
    </div>
    `;
}

我的组件有一个简单的模板：

<div class="tree-container">
  <div id="tree"></div>
</div>

在树生成之后变成：

<div class="tree-container">
  <div id="tree" class=" Treant Treant-loaded"><svg height="598" version="1.1" width="633" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.4</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs></svg><div class="node thread-node" style="left: 191.5px; top: 224px;">
<div id="thread60" class="thread-node-wrapper">
  <a class="main-link" routerlink="../thread/60">
    Lorem ipsum
  </a>
</div>
</div></div>
</div>

并且 routerlink="../thread/60" 仍然未被Angular编译/识别 .

In Angular.js: 回到Angular.js（之前用于项目），我们将使用_2985311解决问题：

var treeIsLoaded = function () {
    // ...
    var e = $('#tree')[0];
    $compile(e)($scope);
    if (!$scope.$$phase) {
        $rootScope.safeApply();
    }

    // ...

};

所有的指令，如ng-click，ng-show等，都得到了解决，所以我对在Angular2中运行它有多困难感到有些困惑 .

What I tried:

javascript angular