角2のディレクティブとDOM操作

Question

解決策を見つけるために苦労しています。

要素のinnerHtmlを別のライブラリから生成されたhtmlに置き換えようとしています。もちろん、Angular 2ではなく、シンプルだと思われます。私は基本的にAngular 2 app指令でgoogle-prettify-codeスクリプトをラップしています。

私のprettify指令が含まれているコンポーネントhtmlに、このようなものを追加したいと思います。

<pre dg-prettify> 
    &lt;div class=&quot;foobar&quot;&gt; 
    &lt;div&gt;Hello World&lt;/div&gt; 
    &lt;/div&gt; 
</pre> 

はその後、私の飾り立てるディレクティブの内側に私はpreタグのinnerHTMLプロパティを取得し、処理する外部ライブラリにそれを渡す必要があります。私はデコードされたhtml構造体を取得し、preタグのinnerHtmlに元のコンテンツを置き換える必要があります。

Answer 1

コンポーネントHTMLの内容が静的であれば、このような何かが動作するはずです：

@Directive({ 
    selector: '[dg-prettify]' 
}) 
export class Prettify { 
    constructor(private elRef:ElementRef) {} 
    ngOnInit() { 
    let innerHTML = this.elRef.nativeElement.innerHTML; 
    console.log(innerHTML); 
    // call 3rd-party library 
    let newHtml = someExternalLibraryFunction(innerHtml); 
    this.elRef.nativeElement.innerHTML = newHtml; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<pre dg-prettify> 
    &lt;div class=&quot;foobar&quot;&gt; 
    &lt;div&gt;Hello World&lt;/div&gt; 
    &lt;/div&gt; 
</pre>`, 
    directives: [Prettify] 
}) 
export class AppComponent { 
    constructor() { console.clear(); 
} 

Plunker

コンポーネントHTMLコンテンツが動的である場合には、文字列としてディレクティブにそのコンテンツを渡しますコンテンツが変更されるたびにlifecycle hookngOnChange()を実装してinnerHTMLを更新します。