angular - 使用 Renderer 在 Angular2 中操作 DOM 的有效方法是什么？

Question

我注意到 Angular2 Renderer 没有从 DOM 中提取数据的 API，例如 textContent 或 innerHTML 或 getAttribute。甚至@ViewChild包含一个目标元素，您可以使用 JS DOM API 更改传统方式，但不建议将其用于其他环境，例如 WebWorker 或 Native Apps。

以下示例将每个单词包装在一个跨度中。我做得正确还是可以改进？

import {Component, Directive, OnInit, ElementRef} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Directive({
  selector: 'wrapper'
})
class WrapperDirective implements OnInit {
  constructor(private _element: ElementRef) {}

  ngOnInit() {
    var tElement = $(this._element.nativeElement);
    var DOM = '';

    tElement
      .text()
      .split(' ')
      .forEach(function(word) {
        if (word !== '') {
          DOM+= '<span>' + word + '</span>';
        }
      });

    tElement.html(DOM);
  }
}

@Component({
  selector: 'ng-app',
  template: `
    <wrapper>Lorem Ipsum Dolar Sit Amet</wrapper>
  `,
  directives: [WrapperDirective]
})
export class MyApp {

}
bootstrap(MyApp);