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

Question

我注意到Angular2 Renderer没有API从DOM中提取数据，例如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);