动态youtube弹出窗口的Angular指令模板

Question

我想创建指令youtube-video-popup.directive.html，它将监听元素的点击并动态地从模板创建弹出窗口。例如。我希望这个html和所有方法都嵌入到指令中，所以我可以添加像this<a youtubeVideoPopup="aFLEAmssDfax"></a>这样的功能，并将videoId传递给生成的弹出窗口，例如：

<div preventBodyScroll class="modal-window modal-window--dark modal-window--no-padding">
    <a href="javascript:void(0)" class="modal-window__close" (click)="closeVideoPopup()"></a>

    <div class='embed-responsive embed-responsive-16by9'>
        <iframe id="ytplayer" type="text/html" [src]="videoId" frameborder="0" allowfdivlscreen></iframe>
    </div>
</div>
<div class="modal-backdrop" (click)="toggleVideoPopup()"></div>

我不希望它成为组件，因为它需要一些额外的编码，包括(click)处理程序每​​次 - 我有很多各种元素，可以触发youtube视频弹出窗口具有不同的布局和样式。

任何人都可以提出移动方向吗？使用Angular 5+可以达到这个目的吗？我从创建模板开始，但@Directive甚至不接受templateUrl作为参数。

---

我在这个特定的youtube-popup案例中看到的一个可能的解决方案是直接在<youtube-popup-component>中使用app.component.html并通过directive -> service -> component链将id传递给组件并显示基于该广告的弹出窗口，假设页面上只有一个youtube弹出窗口一旦

Answer 1

例如，您可以查看此存储库https://github.com/pleerock/ngx-tooltip/tree/master/src。在那里你有一些指令的例子，它通过应用[tooltip]将动态创建的组件附加到组件。基本上最重要的事情是将ViewContainerRef和ComponentFactoryResolver注入你的指令，从那里你可以构建一些组件并将它附加到DOM。