Angular2：カスタムディレクティブで要素の内容を変更する方法は？

Question

Angular2：

カスタムディレクティブが適用されているタグの内容/ innerHTMLを変更しようとしています。

序文：

私はそれがすべて変換されたオブジェクトの値がローカルオブジェクトと更新にロードし、DBからデータを引き出し、私のプロジェクトのための翻訳機能をうまくしようとしています。最初に私はパイプで試しましたが、パイプが不純でない限り（パフォーマンスの低下に伴います）、新しい翻訳が到着したときに値を更新する方法はありません（this questionのようなもの）。次の行にはディレクティブがありますが、コード内のフットプリントが大きくなります。

は、私が試したこと：どんなことなく、私は設定ディレクティブの下でタグの内容をすべて上記のバリエーションを試してみた

@Directive({ 
    selector: '[i18n]' 
}) 
export class I18nDirective 
{ 
    @Input() set i18n(key: string) { 
     this.el.nativeElement.innerHTML = Translations.get(key); 
     this.viewContainer.element.nativeElement.innerHTML = Translations.get(key); 
     this.templateRef.elementRef.nativeElement.innerHTML = Translations.get(key); 
     this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', Translations.get(key)); 
     this.renderer.setElementProperty(this.viewContainer.element.nativeElement, 'innerHTML', Translations.get(key)); 
     this.renderer.setElementProperty(this.templateRef.elementRef.nativeElement, 'innerHTML', Translations.get(key)); 

     this.viewContainer.createEmbeddedView(this.templateRef); 
    } 

    public constructor(
     private el: ElementRef, 
     private templateRef: TemplateRef<any>, 
     private viewContainer: ViewContainerRef, 
     private renderer: Renderer, 
    ) { } 
} 

、しかし：

私はそのようなディレクティブを持っています成功。ここで

はタグです：

<span class="..." *i18n="'translation-page-title'"></span> 

は、どのように私は動的にディレクティブを含むタグのinnerHTMLプロパティを変更できますか？言語が変更されると、おそらく動的に変更されますか？

ありがとうございます！

Answer 1

それは自動的にラップディレクティブの前に*を使用して開始タグと終了タグの間の内容は<template>...</template>です。これらのタグはブラウザからエスケープされ、これによりコンテンツを変更することができます。次に、TemplateRefを使用して指示文に挿入し、createEmbeddedViewを使用して変更を行います。その必要はないので、*を削除してレンダラーを使用してコンテンツを変更することができます。ここには翻訳なしのworking exampleがあります。

Answer 2

まず、Translations.get(key)は非同期で、Promise,Observableなどのコールバックを行うものとします。これは正しいです？もしそうなら、あなたはそれがデータを返すのを待つ必要があるかもしれません：

Translations.get(key).then(function(data) { 
    el.nativeElement.innerHTML; 
}); 

また、HTMLコードにアスタリスクを削除してみてください：

<span i18n="'translation-page-title'"></span>