サードパーティのlib DOM相互作用（VideoJS）後の角2要素の再作成

Question

3Rdパーティライブラリによって削除された後、いくつかのDOM要素を再作成する必要があるときは、どの方法で行ってください。一例として、VideoJS dispose（）関数の後、元の<video>要素が削除されます。

私はこの解決策をテンプレート参照で使用しましたが、コンテンツが削除された後でコンセントテンプレートを再作成できません。

<template #videotemp> 
    <video id="video" preload="auto"> 
     <source [src]="rtmp" type="rtmp/mp4" /> 
     <source [src]="dash" type="application/dash+xml" /> 
    </video> 
</template> 
<template #video [ngTemplateOutlet]="videotemp"></template> 

これは正しいですか？参照テンプレートから要素を再作成するにはどうすればよいですか？

Answer 1

同じ問題を抱えている人にとっては、ここに私の解決策があります。 多くのチュートリアルやディスカッションを読んだ後、TemplateRefとViewContainerRefは正しい方法です。

別の指示文stcを使用した場合の考え方は異なります。私の解決策は同じコンポーネント内で行われます。テンプレート内の

HTML内部の部品

<template #videoTemplate> 
    <video> 
     <source [src]="rtmp" type="rtmp/mp4" /> 
     <source [src]="dash" type="application/dash+xml" /> 
    </video> 
</template> 
<div #videoAnchor></div> 

コードは

export class SomeComponent { 
    @ViewChild('videoTemplate') videoTemplate: TemplateRef<Object>; 
    @ViewChild('videoAnchor', {read: ViewContainerRef}) videoAnchor:any; 
    ... 
    constructor(
     ... 
     private viewContainer: ViewContainerRef, 
     private ref: ChangeDetectorRef 
    ) {} 
    somefunction() { 
     this.videoAnchor.createEmbeddedView(this.videoTemplate); 
     this.ref.detectChanges(); 
    } 
} 

私のコンポーネント内のdiv＃のvideoAnchor

、AFTER複製されます私たちはただのエントリとしてViecontainerRefノードを定義しますクローンされたTemplateRefオブジェクトのポイント。以上です。 Angularが変更したことを知らせるにはChangeDetectorRefを使用する必要があります。それ以外の場合は例外がスローされます。