Khám phá
Trả lời
Hỏi
Đăng nhập

Hàm nào trong Angular2 tương đương với hàm $watch trong AngularJS?

Trong AngularJS, bạn có thể chỉ định watchers để quan sát thay đổi trong các biến scope bằng cách sử dụng hàm $watch của $scope . Hàm tương đương với việc quan sát các thay đổi của biến (ví dụ như các biến component) trong Angular2 là gì?

  1. Bạn sẽ nhìn thấy những mũi tên trong mỗi trang câu hỏi. Chúng cho phép bạn bỏ phiếu thuận / bỏ phiếu chống theo sự liên quan của các câu hỏi / trả lời.
  2. Chỉnh sửa câu hỏi của bạn / câu trả lời nếu bạn muốn thay đổi hoặc cập nhật nó.
  3. Nếu bạn không hiểu điều gì đó về câu hỏi, để lại nhận xét hỏi. Những vùng cho câu trả lời chỉ được sử dụng cho câu trả lời.
  4. Nếu tác giả của một câu hỏi đánh dấu một câu trả lời như giải pháp, nhãn hiệu này sẽ được hiển thị.
  5. Nhấn vào đây để xem thêm chi tiết về những hoạt động của hệ thống!

1 trả lời

  • Trong Angular 2, change detection có tính năng tương tự như... $scope.$watch() và $scope.$digest() R.I.P.

    Không may là phần Change Detection trong dev guide vẫn chưa được viết (có phần giữ chỗ gần cuối trang Architecture Overview, trong mục "The Other Stuff").

    Dưới đây là hiểu biết của tôi về cách mà change detection hoạt động:

    • Zone.js "monkey patches the world" - nó chặn tất cả các API không đồng bộ trong trình duyệt (khi Angular chạy). Đây là lý do tại sao ta có thể sử dụng setTimeout() trong các components thay vì $timeout... vì setTimeout() đã được áp dụng monkey patch.
    • Angular xây dựng và duy trì một cây "change detectors". Có 1 (lớp) change dectector cho mỗi component/directive. (Bạn có thể truy cập vào object này bằng cách đưa vào ChangeDetectorRef). Các change detectors này được tạo ra khi Angular khởi tạo các components. Chúng theo dõi trạng thái của tất cả các bindings để thực hiện dirty-checking. Việc này, theo một nghĩa nào đó, giống với $watches() tự động mà Angular 1 đã thiết lập cho template bindings ({}).
      Khác với Angular 1, đồ thị của change detection là một cây có hướng (directed tree) và không thể có vòng (cycle) (điều này làm cho Angular 2 có hiệu năng cao hơn, như chúng ta sẽ thấy dưới đây).
    • Khi một event kích hoạt (trong zone Angular), code mà ta viết (một callback trong event handler) sẽ chạy. Nó có thể cập nhật bất kể dữ liệu nào mà nó muốn - model/state của ứng dụng được chia sẻ và/hoặc view state của component.
    • Sau đó, do các hooks mà Zone.js đã thêm, nó sẽ chạy thuật toán change detection của Angular. Mặc định (tức là nếu bạn không sử dụng chiến lược change detection onPush lên bất cứ components nào), mỗi component trong cây sẽ được kiểm tra một lần (TTL=1)... từ trên đỉnh, theo thứ tự tìm kiếm theo chiều sâu (depth-first). (Nếu bạn đang ở dev mode, change detection sẽ chạy 2 lần (TTL=2). Xem ApplicationRef.tick () để biết thêm thông tin). Nó thực hiện dirty checking trong tất cả các bindings, dùng các objects trong change detector.
      • Lifecycle hooks được xem như một phần trong change detection.
        Nếu dữ liệu component mà bạn muốn xem là một thuộc tính input cơ bản (String, boolean, number), bạn có thể thực thi ngOnChanges() để thông báo về các thay đổi.
        Nếu thuộc tính input là một kiểu tham chiếu (object, array, v.v.), nhưng tham chiếu lại không thay đổi (ví dụ bạn thêm một phần tử vào trong một mảng đã có), bạn sẽ cần phải thực thi ngDoCheck() (xem Câu trả lời này để biết thêm thông tin).
        Bạn chỉ nên thay đổi các thuộc tính của component và/hoặc của các components con (do thực hiện trên cây đơn - tức là luồng dữ liệu vô hướng). Đây là một plunker đã vi phạm điều này. Stateful pipes cũng có thể khiến bạn mắc lỗi tại đây.
    • Đối với bất kỳ thay đổi bindings nào được tìm thấy, các Components sẽ được cập nhật, và sau đó sẽ cập nhật DOM. Change detection sẽ kết thúc tại đây.
    • Trình duyệt sẽ thông báo về các thay đổi DOM và sẽ cập nhật lại màn hình.

    Các tài liệu tham khảo khác để tìm hiểu thêm:

Không phải là câu trả lời bạn đang tìm kiếm? Tìm kiếm câu hỏi khác với các thẻ javascript angularjs angular2 angular2-changedetection hoặc hỏi câu hỏi mới.