angular - 动态 youtube 弹出窗口的 Angular 指令模板
问题描述
我想创建一个指令youtube-video-popup.directive.html
来监听元素上的点击,并动态地从模板创建弹出窗口。例如,我希望将这个 html 和所有方法嵌入指令中,这样我就可以添加这样的功能<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 弹出窗口
解决方案
例如,您可以查看此存储库https://github.com/pleerock/ngx-tooltip/tree/master/src。那里有一些指令示例,将动态创建的组件附加到具有应用 [工具提示] 的组件。基本上最重要的事情是注入ViewContainerRef
并ComponentFactoryResolver
添加到您的指令中,从那里您可以构建一些组件并将其附加到 DOM。
推荐阅读
- asp.net-mvc - How to use asp.net core 3.0 identity (Register & SignIn) for multiple UserName/Email with Different CompanyIDs
- animation - SVG + GSAP mask animation issue with Firefox
- matplotlib - Seaborn Heatmap:分别调整垂直和水平线的线宽
- javascript - Joi:如何仅验证两个键中的一个(带数组)?
- python - 将 python 2.7 转换为 python 3.8
- arrays - 为什么复杂度为 O(n)?
- angular - ngx daterangepicker 材料不起作用
- momentjs - Moment.js:当前日期的年初不是UTC以外的其他时区的预期
- ios - WKWebView 没有在模拟器上加载网页
- google-apps-script - Gmail / gsuite 插件 - 在邮箱打开时自动打开