Я использую bootstrap для своего макета, и мне нужно проверить, не изменился ли автоматический расчетный размер моего DIV с бутстрапом, например width = 25%.angular2 change detection on resize div
Есть ли возможность сделать обнаружение изменений по атрибуту, который я не задал в своем шаблоне, но задан бутстрапом. (window: resize) недостаточно.
ТНХ
Вы можете добавить директиву div и реализовать жизненный цикл крюк ngDoCheck() выполнять собственную логику обнаружения изменений. Вам нужно впрыснуть ElementRef:
constructor(private _elRef:ElementRef) {}
ngDoCheck() {
// use ElementRef to examine the div property of interest
Если div находится внутри шаблона компонента, добавить локальный шаблон переменной
<div #myDiv ...>
Затем используйте @ViewChild(), чтобы получить ссылку на div и реализовать жизненный цикл крюк ngDoCheck() или ngAfterViewChecked(), чтобы выполнить собственную логику обнаружения изменений.
@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
// use this.theDiv to examine the div property of interest
Обратите внимание, что ngDoCheck() и ngAfterViewChecked() будет вызываться каждый раз, когда пробеги обнаружения изменений. См. Также руководство разработчика Lifecycle Hooks.
Решение этой проблемы не работает для меня, потому что мне нужно знать реальный SIZE (w x h) div. Мой div имеет относительную ширину 33,33%, и это не меняется. Но эффективный размер DIV изменился на некоторые вещи в моем APP. проблема в том, что я делаю в ngDoCheck что-то вроде этого новый Ruler (DOM) .measure (this.elementRef). Then ((rect: Rectangle) => {console.log (rect.width);}); } , чтобы проверить реальную ширину, я получаю цикл, я не знаю, почему, но вызываю masure, пока вы меняете на dom, и поэтому на компоненте есть бесконечный цикл. Некоторые идеи? Но я могу использовать это решение для других задач =) –
'measure()' (или обещание, которое он возвращает), вероятно, обезглавлено Zone.js, поэтому, когда асинхронное событие запускается (и после запуска обработчика события) , Угловой крючок снова переключает обнаружение изменений. Вы можете решить эту проблему, запустив код вне зоны углов. Inject [NgZone] (https://angular.io/docs/ts/latest/api/core/NgZone-class.html), затем проверьте размер вашего div вне зоны: 'this._ngZone.runOutsideAngular (_ => { // ... проверьте размер div здесь}); '. –
Я реализую ваше решение, выполняя относительную сложную логику, чтобы проверить, нужно ли мне сбросить высоту, потому что DoCheck вызывается также во многих других событиях, например, при зависании div, но нет необходимости сбросить высоту. DoCheck не вызывается в окне изменения размера, поэтому я также добавил (окно: изменение размера) к компоненту, который вызывает одну и ту же логику для установки и вычисления новой высоты, если это необходимо. –
Есть несколько методов для отслеживания DOM изменения атрибутов:
setIntervalDOMAttrModified + propertychange для IEMutationObserverMutuationObserver работает хорошо, но я заметил, что мне нужно немного больше, чем наблюдатель для атрибута, потому что мой DIV WIDTH всегда 33,33%. Мне нужно знать, когда изменился реальный расчетный размер моего контейнера DIC. Некоторая идея? –
вам нужно что-то вроде 'window.getComputedStyle (element)' – kemsky
да, но когда это я должен назвать? Я не могу назвать это на MutationObserver, потому что атрибут не изменен, он все еще 33,33% –
Не могли бы вы предоставить plunkr ? Спасибо ;-) –