如何将Angular2组件渲染为特定的动态加载DOM元素?

时间:2017-05-04 17:49:04

标签: angular2-components angular2-injection angular2-render

我有一个动态加载并使用jQuery创建视频播放器的组件。 完成后,它看起来像这样:

<div id="1613544e-3695-06ed-7201-9cbbe3ded44b" style="z-index: 1;">
   <div class="elite_vp_mainContainer" style="width: 100%; height: 500px; position: absolute; background: rgb(0, 0, 0); z-index: 999999;">
     <div class="elite_vp_videoPlayer" data-state="loading" style="width: 1440px; height: 500px; z-index: 455558;">
        <video class="elite_vp_videoPlayer" preload="none" style="display: none;">
        </video>
        <div class="elite_vp_overlay">
           <img src="https://i.ytimg.com/vi_webp/RsRuJcyppsY/sddefault.webp" id="elite_vp_overlayPoster">
        </div>
   </div>
</div>

我想在此播放器上动态渲染和注入角度组件作为图层。

所以我有这段代码

  const factory = self.componentFactoryResolver.resolveComponentFactory(WinnerOverlayComponent);
  const ref = self.viewContainerRef.createComponent(factory);
  ref.instance.user = self.user;
  ref.instance.stage = self.stage;
  ref.changeDetectorRef.detectChanges();

viewContainerRef包含对<div id="1613544e-3695-06ed-7201-9cbbe3ded44b" style="z-index: 1;">的引用 这是整件事的父母。

问题是,我必须在 elite_vp_videoPlayer

注入叠加组件

我该怎么做?我一直在寻找这个地方。

将Angular2组件注入特定DOM位置(通过类\ ID)

谢谢大家!

0 个答案:

没有答案