角度2元素在第三方库DOM交互(VideoJS)后的重新生成

Question

当我想在被第三方库删除后重新创建一些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有不同的approcahes。我的解决方案是在同一组分内完成的。

组件内的HTML

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

模板中的代码将在div#videoAnchor之后被克隆

在我的组件中

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

我们只将ViecontainerRef节点定义为克隆TemplateRef对象的入口点。仅此而已。我们需要使用ChangeDetectorRef让角知道我们已经改变了什么，否则它会抛出一个异常。