Question

我想创建指令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弹出窗口

Answer 1

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

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

1 个答案: