如何从angular2的组件中调用按钮的指令onclick

Question

在单击图像时，我正在打开图像弹出库，在弹出窗口中，我必须应用图像缩放。 为了缩放，我创建了指令，该指令调用onload，但在弹出窗口打开时不调用。

弹出窗口时如何调用指令？

首先，我根据以下条件从组件调用组件，而组件正在调用指令，

<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是我的指令，

任何解决方案将不胜感激谢谢

Answer 1

您可以使用@HostListener和@HostBinding的概念在点击时调用指令，

此代码将为您提供帮助。

  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