Helpex - Trao đổi & giúp đỡ Đăng nhập

Angular 2: Làm cách nào để tôi có được tham chiếu đến đối tượng cửa sổ?

Nhớ $windowđối tượng trong Angular 1? Hóa ra là khá hữu ích từ bây giờ và sau đó. Nhưng còn Angular 2 thì sao? $windowkhông tồn tại ở đó. Giải pháp thay thế là gì? Làm cách nào tôi có thể đưa Windowđối tượng vào các thành phần Angular 2 của mình?

Tham chiếu đến các đối tượng trình duyệt toàn cầu như documenthoặc windowtrực tiếp từ bên trong mã của bạn là có thể, nhưng không được khuyến khích và bị coi là hành vi xấu.

Đặc biệt vì Angular 2 không chỉ được thiết kế để chạy trong trình duyệt của bạn mà còn trên thiết bị di động, máy chủ hoặc web worker nơi các đối tượng như thế windownày có thể không khả dụng.

Do đó, cách tiếp cận được đề xuất là quấn các đối tượng như vậy và tiêm chúng thông qua cơ chế tiêm phụ thuộc . Bằng cách này, có thể thay đổi phiên bản thời gian chạy cụ thể của một đối tượng nhất định dựa trên môi trường mà ứng dụng Angular đang chạy. Kết quả chúng tôi muốn đạt được như sau:

...
import { WindowRef } from './WindowRef';

@Component({...})
class MyComponent {

    constructor(private winRef: WindowRef) {
        // getting the native window obj
        console.log('Native window obj', winRef.nativeWindow);
    }

}

Vậy hãy cùng xem.

Gói window

Một cách rất đơn giản và dễ dàng để kết thúc windowlà tạo một dịch vụ Angular 2. Điều đó dễ dàng như tạo một lớp ES6 và trang trí nó bằng @Injectable.

import { Injectable } from '@angular/core';

function _window() : any {
   // return the global native browser window object
   return window;
}

@Injectable()
export class WindowRef {
   get nativeWindow() : any {
      return _window();
   }
}

Đăng ký WindowReflàm nhà cung cấp

Tuyệt vời, cho đến nay chúng tôi đã bọc windowvật thể của mình. Tuy nhiên, chúng tôi vẫn chưa sẵn sàng. Trước tiên, chúng tôi cần đăng ký dịch vụ tiêm của chúng tôi. Này được thực hiện bằng cách đăng ký nó trên NgModulecủa providersmảng hoặc trực tiếp trên thành phần, dựa trên phạm vi cung cấp dịch vụ của chúng tôi. Kiểm tra các tài liệu chính thức về các nhà cung cấp để biết thêm chi tiết .

import { WindowRef } from './WindowRef';

...

@NgModule({
    ...
    providers: [ WindowRef ]
})
export class AppModule{}

Hãy tự mình thử

Tuyệt vời, chúng tôi đã sẵn sàng. Bây giờ bạn có thể đưa WindowRefvào các thành phần Angular 2 của mình và có quyền truy cập vào windowđối tượng gốc .

Đây là một Plunker để chơi với:

https://plnkr.co/edit/9qmBCVrmBZj3mPQjM0Zc?p=preview

Bạn chỉ muốn đăng ký sự kiện vào windowhay document? Sau đó, bạn cũng có thể muốn đọc cái này:

http://juristr.com/blog/2016/09/ng2-event-registration-document/

12 hữu ích 0 bình luận 71k xem chia sẻ

Có thể bạn quan tâm

loading