我要创建指令
youtube-video-popup.directive.html
它将侦听对元素的单击,并从模板动态创建弹出窗口。
E、 我希望这个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视频弹出窗口。
有人能建议一个行动方向吗?使用角度5+是否可以实现这一点?我从创建模板开始,但是
@Directive
甚至不接受
templateUrl
作为参数。
对于这个特殊的youtube弹出窗口案例,我看到的一个可能的解决方案是使用
<youtube-popup-component>
直接进入
app.component.html
并通过
directive -> service -> component
基于该广告链接并显示弹出窗口,假设一次只能在页面上显示一个youtube弹出窗口
