[英]how to call a directive onclick of a button from a component in angular2
On click of a image i am opening image popup gallery, on popup i have to apply image zoom. 在单击图像时,我正在打开图像弹出库,在弹出窗口中,我必须应用图像缩放。 for zoom I created directive which is calling onload but not when popup opens.
为了缩放,我创建了指令,该指令调用onload,但在弹出窗口打开时不调用。
How to call directive when popup comes? 弹出窗口时如何调用指令?
First i am calling a component from component i am calling directive based on some conditions like below, 首先,我根据以下条件从组件调用组件,而组件正在调用指令,
<div *ngIf="hirusImage; else normalImage " >
<div >
<div id="seadragon-viewer" nwImageZoom [primaryPicture]="primaryPicture" style="float:left;width:500px;height: 333px;color: #333;"></div>
</div>
</div>
nwImageZoom is my directive, nwImageZoom是我的指令,
any solutions will be appreciated thank you 任何解决方案将不胜感激谢谢
you can use the concept of @HostListener and @HostBinding for calling the directive on the click, 您可以使用@HostListener和@HostBinding的概念在点击时调用指令,
this code will help you. 此代码将为您提供帮助。
import { Directive, HostListener, HostBinding } from '@angular/core' @Directive({ selector:'[nwImageZoom]' }) export class NwImageZoomDirective{ constructor(){} // here you can add the css class you want add for zooming for that we use // isZoom is the variable which decide whether the class will be add or not.] @HostBinding('class.zoom') isZoom=false; enter code here // here you can attached the 'toggleZoom' function to @HostListener and the // inside @HostListener you can pass the Event like-'click' @HostListener('click') toggleZoom(){ this.isZoom=!this.isZoom; }
enter code here
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.