Angular 第 3 方库 DOM 交互后的 2 元素娱乐 (VideoJS)

Question

当我想重新创建一些被 3Rd party lib 删除的 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>

模板中的代码将在 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 让 Angular 知道我们已经改变了一些东西，否则它会抛出异常。

Angular 第 3 方库 DOM 交互后的 2 元素娱乐 (VideoJS)

Angular 2 Element recreation after 3rd party lib DOM interaction (VideoJS)

javascript

templates

dispose

video.js

angular