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

【问题标题】：Angular directive template for dynamic youtube popup动态 youtube 弹出窗口的 Angular 指令模板
【发布时间】：2019-09-11 15:42:06
【问题描述】：

我想创建指令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 案例，我看到的一种可能的解决方案是直接在 app.component.html 中使用 <youtube-popup-component> 并通过 directive -> service -> component 链将 id 传递给组件并根据该广告显示弹出窗口，假设仅一个 youtube 弹出窗口可以同时出现在页面上

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

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

【讨论】：

听起来像是一个计划，会检查一下，ty！