Phát hiện thay đổi chiều cao và chiều rộng phần tử trong Angular 2

Question

Tôi đang tìm giải pháp nhưng không tìm thấy gì (chỉ các bài viết về (window:resize), nhưng đó không phải là tôi đang tìm kiếm).

Cách phát hiện thay đổi kích thước phần tử trong Angular 2?

<div #myElement (sizeChanged)="callback()" /> 

Tôi muốn sử dụng một số CSS hình ảnh động và phát hiện yếu tố của height và width thay đổi.

Answer 1

Vấn đề thậm chí không phải là vấn đề về Góc 2. Nói chung, làm cách nào để bạn phát hiện các thay đổi kích thước trong bất kỳ phần tử nào khác ngoài window? Có một sự kiện onresize, nhưng điều này chỉ được kích hoạt cho window và không có giải pháp rõ ràng nào khác.

Cách chung mà nhiều cách tiếp cận này, là đặt khoảng thời gian là 100ms và kiểm tra chiều rộng và chiều cao của div để phát hiện thay đổi. Nghe thật khủng khiếp, đây là cách tiếp cận phổ biến nhất.

Từ this answer cho câu hỏi chung chung hơn, có thư viện để thực hiện việc này chỉ sử dụng sự kiện: http://marcj.github.io/css-element-queries/. Giả sử, nó khá tốt. Bạn sẽ sử dụng các ResizeSensor để có được những gì bạn đang tìm kiếm.

Trừ khi tất nhiên, bạn chỉ mong đợi div để đổi kích thước khi cửa sổ thực hiện. Sau đó, onresize là những gì bạn đang tìm kiếm.