Question

我正在使用Angular 4附带的Ionic 3.我构建了一个组件，它从当前元素中获取原始(click)事件并将其绑定到一个新元素（在组件中以dinamically方式创建）。我正在尝试做的是从当前组件中删除原始单击事件。

HTML

<!-- imageZoom() is defined in my view controller: page.ts -->
<inline-spinner
    [src]="http://..."
    (click)="imageZoom($event)"></inline-spinner>

COMPONENT

export class InlineSpinnerComponent implements OnChanges {

    public img: any;

    @Output() click: EventEmitter<any> = new EventEmitter();

    constructor() {

        this.img = new Image();

        // I want to unbind/remove "click" from here if possible.
        // this.elementRef.nativeElement = <inline-spinner>
    }

    ngOnChanges() {

        // Just to show what I'm doing with the original click event
        this.img.addEventListener('click', () => { this.click.emit(this.img); });
    }
}

任何帮助都将非常感激。谢谢！

Answer 1

我想你正在寻找这样的东西。这应该在一个指令中，你附加到你想要中和点击的元素。

它将检查click事件是否仅来自相关组件，在这种情况下只执行Nothing

@HostListener('document:click', ['$event', '$event.target'])
    onClick(event: Event, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        if(this.elementRef.nativeElement ==== targetElement){
            event.preventDefault();
        }
    }

在Angular 2中，如果“click”直接附加在HTML标记中，如何从组件/指令中删除click事件？

1 个答案: