angular - Rendererを使用してAngular2でDOMを操作する効率的な方法は何ですか?

Question

Angular2 Renderer には、textContent、innerHTML、getAttribute などの DOM からデータを抽出するための API がないことに気付きました。@ViewChildJS DOM API を使用して従来の方法で変更できるターゲット要素も保持しますが、WebWorker やネイティブ アプリなどの他の環境には推奨されません。

次の例では、各単語をスパンでラップしています。私はそれを適切に行っていますか、それとも改善できますか?

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);