Góc 2 sự kiện nhấp chuột phải?

Question

Tôi đang xây dựng một ứng dụng web tương tác với Angular2 và tôi đang tìm cách để nắm bắt các nhấp chuột phải vào một thành phần góc. Tôi cũng cần phải ngăn chặn trình đơn ngữ cảnh trình duyệt xuất hiện trên một nhấp chuột phải để tôi có thể hiển thị menu ngữ cảnh tùy chỉnh của riêng mình.

Tôi biết rằng ở góc 1, bạn phải tạo chỉ thị tùy chỉnh để nắm bắt sự kiện nhấp chuột phải. Đây có phải là trường hợp trong Angular 2, hoặc nó được xây dựng trong/là có một cách dễ dàng hơn để làm điều đó? Tôi đã xem qua một số câu hỏi SO trước đây nhưng chúng không liên quan đến Angular2.

Làm cách nào để hoàn thành việc chụp các nhấp chuột phải và ngăn trình đơn ngữ cảnh của trình duyệt xuất hiện trong Angular2?

Answer 1

Trong 2+ kiễu góc, bạn có thể chụp bất kỳ sự kiện như:

<div (anyEventName)="whateverEventHandler($event)"> 
</div> 

Lưu ý rằng $event là không bắt buộc, và sự trở lại của hàm là sự trở lại của trình xử lý sự kiện, vì vậy, bạn có thể return false; để tránh tác vụ trình duyệt mặc định từ sự kiện.

Trong trường hợp của bạn, tên sự kiện là contextmenu. Vì vậy, mã của bạn có thể là một cái gì như thế này:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (contextmenu)="onRightClick($event)"> 
     Right clicked 
     {{nRightClicks}} 
     time(s). 
    </div> 
    `, 
    // Just to make things obvious in browser 
    styles: [` 
    div { 
     background: green; 
     color: white; 
     white-space: pre; 
     height: 200px; 
     width: 200px; 
    } 
    `] 
}) 
export class App { 
    nRightClicks = 0; 

    constructor() { 
    } 

    onRightClick() { 
    this.nRightClicks++; 
    return false; 
    } 
} 

Dưới đây là một ví dụ làm việc đầy đủ:
http://on.gurustop.net/2E0SD8e

Answer 2

Bạn không thể sử dụng Javascript trong mẫu Angular 2.

Nhưng bạn có thể chỉ cần sử dụng thư viện của bên thứ ba như angular2-contextmenu.