在 DOM 节点中渲染 angular 2 组件

Question

我正在创建一个使用 CodeMirror 作为源代码编辑器的 Angular 2 应用程序。我想向它添加一个线小部件，这需要我向 CodeMirror 提供一个 DOM 节点。我想在这个小部件中放置一些依赖于应用程序数据的复杂逻辑，所以它需要是一个 Angular 组件，但是我不知道如何在 DOM 节点中呈现 Angular 元素（或者它是否是甚至可能）。通常我会使用ViewContainerRef，但在这种情况下不起作用。

有什么方法可以使用 Angular 2 实现这一点吗？

Answer 1

您始终可以使用 ng2-codemirror (https://www.npmjs.com/package/ng2-codemirror)，它已经为您解决了这个问题。

无论如何，如果您需要从 Angular 2 组件中获取 DOM 节点，您可以执行以下操作：

<div #element>
</div>

然后，在您的打字稿文件上，您可以：

import * as ng from "angular2/core";

export class MyComponent {
   @ng.ViewChild("element", {read: ng.ElementRef})
   element: ng.ElementRef;

   ngAfterViewInit(){
      this.element.nativeElement; // you dom node is here!
   }
}