如何從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