Góc 2: Máy chủ ràng buộc và nghe Máy chủ

Question

Làm cách nào để sử dụng trình nghe chủ và liên kết máy chủ trong angularjs 2? Tôi đã cố gắng như thế này cho người nghe máy chủ nhưng luôn hiển thị lỗi "Tuyên bố dự kiến".

app.component.ts:

import {Component, EventEmitter, HostListener, Directive} from 'angular2/core'; 

@Directive({ 
    selector: 'button[counting]' 
}) 

class HostSample { 
    public click = new EventEmitter(); 
    @HostListener('click', ['$event.target']); 
    onClickBtn(btn){ 
     alert('host listener'); 
    } 
} 

@Component({ 
    selector: 'test', 
    template: '<button counting></button>', 
    directives: [HostSample] 
}) 

export class AppComponent { 
    constructor(){ 
    } 
} 

Answer 1

@HostListener là một trang trí cho phương pháp xử lý gọi lại/sự kiện, vì vậy loại bỏ các ; ở phần cuối của dòng này:

@HostListener('click', ['$event.target']); 

Dưới đây là một hoạt động plunker mà tôi đã tạo bằng cách sao chép mã từ API docs, nhưng tôi đặt phương thức onClick() trên cùng một dòng để làm rõ:

import {Component, HostListener, Directive} from 'angular2/core'; 

@Directive({selector: 'button[counting]'}) 
class CountClicks { 
    numberOfClicks = 0; 
    @HostListener('click', ['$event.target']) onClick(btn) { 
    console.log("button", btn, "number of clicks:", this.numberOfClicks++); 
    } 
} 
@Component({ 
    selector: 'my-app', 
    template: `<button counting>Increment</button>`, 
    directives: [CountClicks] 
}) 
export class AppComponent { 
    constructor() { console.clear(); } 
} 

---

chủ ràng buộc cũng có thể được sử dụng để lắng nghe sự kiện toàn cầu:

To listen to global events, a target must be added to the event name. The target can be window, document or body (reference)

@HostListener('document:keyup', ['$event']) 
handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... } 

Answer 2

@HostListener('click', ['$event.target']); 

tháo ; như đã đề cập bởi @BhaRathi RajaMani trong bình luận cho @ Mark Rajcok s answer

Answer 3

Đây là ví dụ đơn giản để sử dụng cả hai:

nhập { Chỉ thị, HostListener, HostBinding } từ '@ góc/lõi';

@Directive({ 
    selector: '[Highlight]' 
}) 
export class HighlightDirective { 
    @HostListener('mouseenter') mouseover() { 
    this.backgroundColor = 'green'; 
    }; 

    @HostListener('mouseleave') mouseleave() { 
    this.backgroundColor = 'white'; 
    } 

    @HostBinding('style.backgroundColor') get setColor() { 
    return this.backgroundColor; 
    }; 

    private backgroundColor = 'white'; 
    constructor() {} 

} 

Giới thiệu:

1. HostListener có thể ràng buộc một sự kiện để nguyên tố này.
2. HostBinding có thể liên kết một kiểu với phần tử.

3. đây là chỉ thị, vì vậy chúng tôi có thể sử dụng nó cho

   một số văn bản

4. Vì vậy, theo debug, chúng ta có thể thấy rằng div này đã được binded style = "background-color: trắng"

   Một số văn bản

5. chúng tôi cũng có thể thấy rằng EventListener của div này có hai sự kiện: mouseenter và mouseleave. Vì vậy, khi chúng tôi di chuyển chuột vào div, màu sắc sẽ trở thành màu xanh lá cây, chuột để lại, màu sắc sẽ trở thành màu trắng.