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

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

1 个答案: