Шаблон угловой директивы для динамического всплывающего окна на YouTube - PullRequest
Новая
       15

Шаблон угловой директивы для динамического всплывающего окна на YouTube

0 голосов
/ 22 апреля 2019

Я хочу создать директиву 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, - это использовать <youtube-popup-component> непосредственно в app.component.html и передавать идентификатор компоненту через цепочку directive -> service -> component и показывать всплывающее окно на основе этого объявления, предполагая только одно всплывающее окно YouTube может быть на странице одновременно

1 Ответ

1 голос
/ 22 апреля 2019

Вы можете, например, взглянуть на этот репозиторий https://github.com/pleerock/ngx-tooltip/tree/master/src. Там у вас есть пример директивы, которая добавляет динамически созданный компонент к компоненту с примененным [tooltip].В основном, самое важное, что нужно сделать - это вставить ViewContainerRef и ComponentFactoryResolver в вашу директиву, оттуда вы можете собрать какой-нибудь компонент и присоединить его к DOM.

...