Phát hiện thay đổi kích hoạt bằng tay trong Angular

Tôi đang viết một thành phần Angular có một tài sản Mode(): string.

Tôi muốn có thể đặt thuộc tính này theo chương trình không đáp ứng với bất kỳ sự kiện nào.

Vấn đề là trong trường hợp không có sự kiện trình duyệt, ràng buộc mẫu {{Mode}}không cập nhật.

Có cách nào để kích hoạt phát hiện thay đổi này bằng tay không?

Hãy thử một trong những điều sau:

• ApplicationRef.tick()- tương tự như AngularJS $rootScope.$digest()- tức là kiểm tra cây thành phần đầy đủ
• NgZone.run(callback)- tương tự như $rootScope.$apply(callback)- tức là, đánh giá chức năng gọi lại bên trong Vùng góc. Tôi nghĩ, nhưng tôi không chắc chắn, điều này cuối cùng sẽ kiểm tra cây thành phần đầy đủ sau khi thực hiện chức năng gọi lại.
• ChangeDetectorRef.detectChanges()- tương tự như $scope.$digest()- tức là chỉ kiểm tra thành phần này và con của nó

Bạn có thể tiêm ApplicationRef, NgZonehoặc ChangeDetectorRefvào thành phần của bạn.

Tôi đã sử dụng tài liệu tham khảo câu trả lời được chấp nhận và muốn đưa ra một ví dụ, vì tài liệu Angular 2 rất khó đọc, tôi hy vọng điều này dễ dàng hơn:

1. Nhập khẩu NgZone:

   import { Component, NgZone } from '@angular/core';
   

2. Thêm nó vào trình xây dựng lớp của bạn

   constructor(public zone: NgZone, ...args){}
   

3. Chạy mã với zone.run:

   this.zone.run(() => this.donations = donations)
   

Tôi đã có thể cập nhật nó với markForCheck ()

Nhập ChangeDetectorRef

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

Tiêm và khởi tạo nó

constructor(private ref: ChangeDetectorRef) { 
}

Cuối cùng đánh dấu phát hiện thay đổi sẽ diễn ra

this.ref.markForCheck();

Đây là một ví dụ nơi markForCheck () hoạt động và DetChanges () không.

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

EDIT: Ví dụ này không mô tả vấn đề nữa :( Tôi tin rằng nó có thể đang chạy phiên bản Angular mới hơn, nơi nó đã được sửa.

(Nhấn STOP / RUN để chạy lại)

Trong Angular 2+, hãy thử trang trí @Input

Nó cho phép một số ràng buộc tài sản tốt đẹp giữa các thành phần cha mẹ và con.

Đầu tiên tạo một biến toàn cục trong cha mẹ để giữ đối tượng / thuộc tính sẽ được truyền cho con.

Tiếp theo tạo một biến toàn cục trong con để giữ đối tượng / thuộc tính được truyền từ cha mẹ.

Sau đó, trong html cha, nơi sử dụng mẫu con, thêm ký hiệu ngoặc vuông với tên của biến con, sau đó đặt nó bằng với tên của biến cha. Thí dụ:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

Cuối cùng, nơi thuộc tính con được xác định trong thành phần con, hãy thêm Trình trang trí đầu vào:

@Input()
public childVariable: any

Khi biến cha mẹ của bạn được cập nhật, nó sẽ chuyển các bản cập nhật cho thành phần con, nó sẽ cập nhật html của nó.

Ngoài ra, để kích hoạt một chức năng trong thành phần con, hãy xem ngOnChanges.

ChangeDetectorRef.detectChanges () - tương tự $ scope. $ Digest () - tức là chỉ kiểm tra thành phần này và các phần tử con của nó