Question

当我想在3Rd方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有不同的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让Angular知道我们已经改变了一些东西，否则它会抛出异常。

第三方lib DOM交互后的Angular 2 Element娱乐（VideoJS）

1 个答案: