[解決済み] TypeScript - Angular 2でコンテナ要素にHTMLを追加する

質問

ある要素に単純にhtmlを追加したいのです。 いくつかのリンクをチェックしたところ、さまざまな紛らわしい、動作しない、推奨されない解決策が見つかりました。

JavaScriptを使って、こんなことをやってみる。

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

typescript/angular2, RC5を使用して同じ結果を得るにはどうしたらよいでしょうか？

EDIT

クラスを持つ要素 .one が外部jsで生成され、修正できない。

どうすればいいですか？

1.

<div class="one" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="two">two</div>';

参照 RC.1では、バインディング構文を使って追加できないスタイルがあります。

1. あるいは

<div class="one" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

またはDOMに直接アクセスできないようにする。

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}