Tôi sử dụng bootstrap cho bố cục của mình và tôi cần kiểm tra xem kích thước được tính toán tự động của DIV với bootstrap chẳng hạn width = 25% được thay đổi.angular2 phát hiện thay đổi về thay đổi kích thước div
Có khả năng phát hiện thay đổi trên thuộc tính mà tôi không đặt trong mẫu của mình không, nhưng được thiết lập bởi bootstrap. (cửa sổ: thay đổi kích thước) là không đủ.
thx
Bạn có thể thêm một chỉ thị cho div và thực hiện vòng đời móc ngDoCheck() để thực hiện logic phát hiện sự thay đổi của riêng bạn. Bạn sẽ cần phải tiêm ElementRef:
constructor(private _elRef:ElementRef) {}
ngDoCheck() {
// use ElementRef to examine the div property of interest
Nếu div là bên trong một mẫu thành phần, thêm một mẫu địa phương biến
<div #myDiv ...>
Sau đó sử dụng @ViewChild() để có được một tham chiếu đến div và thực hiện các móc vòng đời ngDoCheck() hoặc ngAfterViewChecked() để thực hiện logic phát hiện thay đổi của riêng bạn.
@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
// use this.theDiv to examine the div property of interest
Lưu ý rằng ngDoCheck() và ngAfterViewChecked() sẽ được gọi mỗi khi phát hiện thay đổi diễn ra. Xem thêm hướng dẫn dev Lifecycle Hooks.
Các giải pháp trong vấn đề này không làm việc cho tôi bởi vì tôi cần phải biết SIZE thực (w x h) của div. Div của tôi có chiều rộng tương đối 33,33% và điều này không thay đổi. Nhưng kích thước hiệu quả của DIV đã thay đổi khi thực hiện một số điều trong APP của tôi. vấn đề là nếu tôi làm trong ngDoCheck một cái gì đó như thế Thước mới (DOM) .measure (this.elementRef) .then ((rect: Rectangle) => {console.log (rect.width);}); } để kiểm tra chiều rộng thực tôi nhận được một vòng lặp, tôi không biết tại sao nhưng gọi masure whil làm một sự thay đổi trên dom và do đó, có một vòng lặp infite trên componente. Một vài ý tưởng? Nhưng tôi có thể sử dụng giải pháp này cho các vấn đề khác =) –
'measure()' (hoặc lời hứa nó trả về) có thể do Zone.js vá khỉ, vì vậy khi sự kiện không đồng bộ kích hoạt (và sau khi trình xử lý sự kiện chạy) , Móc của Angular chạy phát hiện thay đổi một lần nữa. Bạn có thể giải quyết vấn đề này bằng cách chạy mã của bạn bên ngoài vùng Angular. Tiêm [NgZone] (https://angular.io/docs/ts/latest/api/core/NgZone-class.html), sau đó kiểm tra kích thước div của bạn bên ngoài vùng: 'this._ngZone.runOutsideAngular (_ => { // ... kiểm tra kích thước div ở đây}); –
Tôi thực hiện giải pháp của bạn, thực hiện logic phức tạp tương đối để kiểm tra xem tôi có phải đặt lại chiều cao hay không, vì DoCheck cũng được gọi trên nhiều sự kiện khác, ví dụ như di chuột lên div nhưng không cần phải đặt lại chiều cao. DoCheck không được gọi trên cửa sổ thay đổi kích thước, vì vậy tôi cũng đã thêm (cửa sổ: thay đổi kích thước) thành phần gọi cùng một logic để đặt và calc chiều cao mới nếu cần. –
Có vài phương pháp để theo dõi những thay đổi thuộc tính DOM:
setIntervalDOMAttrModified + propertychange cho IEMutationObserverMutuationObserver hoạt động tốt, nhưng tôi nhận thấy tôi cần nhiều hơn một chút so với người quan sát thuộc tính, vì DIV WIDTH của tôi luôn là 33,33% tôi cần biết khi SIZE tính toán của container DIC thực của tôi thay đổi. Một số ý tưởng? –
bạn cần một cái gì đó như 'window.getComputedStyle (element)' – kemsky
yea, nhưng khi nào tôi nên gọi nó? Tôi không thể gọi nó trên MutationObserver vì thuộc tính không bị thay đổi, nó vẫn là 33,33% –
Ông có thể cung cấp một plunkr ? Thanks ;-) –