Trình kết xuất đã bị phản đối trong Angular 4.0.0-rc.1, hãy đọc bản cập nhật bên dưới
Cách angular2 là sử dụng listenhoặc listenGlobaltừ Renderer
Ví dụ: nếu bạn muốn thêm một sự kiện nhấp chuột vào Thành phần, bạn phải sử dụng Renderer và ElementRef (điều này cũng cung cấp cho bạn tùy chọn sử dụng ViewChild hoặc bất cứ thứ gì lấy ra nativeElement)
constructor(elementRef: ElementRef, renderer: Renderer) {
// Listen to click events in the component
renderer.listen(elementRef.nativeElement, 'click', (event) => {
// Do something with 'event'
})
);
Bạn có thể sử dụng listenGlobalmà sẽ cung cấp cho bạn truy cập vào document, bodyvv
renderer.listenGlobal('document', 'click', (event) => {
// Do something with 'event'
});
Lưu ý rằng kể từ phiên bản beta.2 listenvà listenGlobaltrả về một hàm để loại bỏ trình nghe (xem phần ngắt thay đổi từ thay đổi cho phiên bản beta.2). Điều này là để tránh rò rỉ bộ nhớ trong các ứng dụng lớn (xem # 6686 ).
Vì vậy, để loại bỏ trình nghe, chúng ta đã thêm động, chúng ta phải gán listenhoặc listenGlobalcho một biến sẽ giữ hàm trả về, và sau đó chúng ta thực thi nó.
// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;
// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;
constructor(elementRef: ElementRef, renderer: Renderer) {
// We cache the function "listen" returns
this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
// Do something with 'event'
});
// We cache the function "listenGlobal" returns
this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
// Do something with 'event'
});
}
ngOnDestroy() {
// We execute both functions to remove the respectives listeners
// Removes "listen" listener
this.listenFunc();
// Removs "listenGlobal" listener
this.globalListenFunc();
}
Đây là một plnkr với một ví dụ hoạt động. Ví dụ chứa cách sử dụng listenvà listenGlobal.
Sử dụng RendererV2 với Angular 4.0.0-rc.1 + (Renderer2 kể từ 4.0.0-rc.3)
25/2/2017 : Rendererđã không được dùng nữa, bây giờ chúng ta nên sử dụng RendererV2
10/03/2017 : RendererV2được đổi tên thành Renderer2. Xem những thay đổi phá vỡ .
RendererV2không có thêm listenGlobalchức năng cho các sự kiện toàn cầu (tài liệu, cơ thể, cửa sổ). Nó chỉ có một listenchức năng đạt được cả hai chức năng.
Để tham khảo, tôi sao chép và dán mã nguồn của triển khai DOM Renderer vì nó có thể thay đổi (vâng, nó góc cạnh!).
listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
() => void {
if (typeof target === 'string') {
return <() => void>this.eventManager.addGlobalEventListener(
target, event, decoratePreventDefault(callback));
}
return <() => void>this.eventManager.addEventListener(
target, event, decoratePreventDefault(callback)) as() => void;
}
Như bạn có thể thấy, bây giờ nó xác minh nếu chúng ta truyền một chuỗi (tài liệu, phần thân hoặc cửa sổ), trong trường hợp đó, nó sẽ sử dụng một addGlobalEventListenerhàm bên trong . Trong mọi trường hợp khác, khi chúng ta vượt qua một phần tử (localEuity), nó sẽ sử dụng một đơn giảnaddEventListener
Để loại bỏ người nghe, nó giống như Renderertrong góc 2.x. listentrả về một hàm, sau đó gọi hàm đó
Thí dụ
// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
console.log('Clicking the document', evt);
})
let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
console.log('Clicking the button', evt);
});
// Remove listeners
global();
simple();
plnkr với Angular 4.0.0-rc.1 bằng RendererV2
plnkr với Angular 4.0.0-rc.3 bằng Renderer2