Angular2 Chỉ thị để sửa đổi xử lý nhấp chuột

Question

Tôi đang cố viết một chỉ thị thuộc tính Angular2 để sửa đổi hành vi của các phần tử nhất định. Cụ thể hơn, tôi muốn áp dụng một thuộc tính cho các phần tử nhất định có trình xử lý nhấp chuột và ngăn hàm bị ràng buộc được thực hiện trong các điều kiện nhất định.

Vì vậy, bây giờ tôi có một yếu tố ví dụ .:

<button (click)="onClick(param1, param2)"></button> 

onClick là một hàm tuyên bố trên thành phần mà chủ các yếu tố nút làm một số công việc.

Những gì tôi muốn làm là viết một cái gì đó như:

<button (click)="onClick(param1, param2)" online-only></button> 

và có một chỉ thị như:

@Directive({ 
    selector: '[online-only]', 
}) 
export class OnlineOnlyDirective { 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    } 
} 

Nhưng bấm điều khiển được thực hiện đầu tiên, do đó không đưa ra chỉ thị của tôi cơ hội để ngừng thực hiện nó.

Cách tiếp cận thứ hai mà tôi đã nghĩ đến là thay thế (bấm) bằng trình xử lý của riêng tôi ([onlineClick] = "onClick") và thực thi hàm đã truyền khi chỉ thị cho rằng phù hợp, nhưng theo cách này tôi không thể chuyển tham số đến hàm onClick và có một chút lạ lùng để nhìn vào.

Bạn có bất kỳ suy nghĩ nào về việc làm điều gì đó như vậy không?

Answer 1

Tôi không biết cách nào để buộc Angular thực thi một trình xử lý sự kiện nào đó trước. Một cách giải quyết có thể được sử dụng một sự kiện tùy chỉnh như:

<button (myClick)="onClick(param1, param2)" online-only></button> 

@Directive({ 
    selector: '[myClick]', 
}) 
export class OnlineOnlyDirective { 
    @Output() myClick: EventEmitter = new EventEmitter(); 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } else { 
     this.myClick.next(e); 
    } 
    } 
} 

Answer 2

Cho đến nay đây là không thể trong một cách mà bạn muốn làm điều đó (chỉ sử dụng (bấm) ràng buộc). Điều này là do tất cả các sự kiện được đăng ký qua Angular -> bởi (click) binding, @HostListner, được ủy quyền thông qua người nghe đơn. Đó là lý do tại sao gọi stopPropagation hoặc chính xác hơn trong trường hợp này stopImmediatePropagation không hoạt động, vì bạn không có trình lắng nghe sự kiện riêng biệt nữa. Vui lòng tham khảo vấn đề này để biết thêm chi tiết: https://github.com/angular/angular/issues/9587.