Io uso bootstrap per il mio layout e ho bisogno di controllare se la dimensione calcolata automatica del mio DIV con bootstrap per esempio larghezza = 25% è cambiato.angular2 cambiamento rilevamento su ridimensionare div
Esiste la possibilità di eseguire il rilevamento modifiche su un attributo che non ho impostato nel modello, ma è impostato da bootstrap. (finestra: ridimensiona) non è abbastanza.
thx
È possibile aggiungere una direttiva per la div e implementare il gancio del ciclo di vita ngDoCheck() per svolgere la propria logica di rilevamento delle modifiche. Avrete bisogno di iniettare ElementRef:
constructor(private _elRef:ElementRef) {}
ngDoCheck() {
// use ElementRef to examine the div property of interest
Se il div è all'interno di un modello di componente, aggiungere un modello variabile locale
<div #myDiv ...>
Quindi utilizzare @ViewChild() per ottenere un riferimento alla div e implementare gancio del ciclo di vita ngDoCheck() o ngAfterViewChecked() per eseguire la propria logica di rilevamento delle modifiche.
@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
// use this.theDiv to examine the div property of interest
noti che ngDoCheck() e ngAfterViewChecked() sarà chiamato ogni volta che viene eseguito di change detection. Vedere anche la guida allo sviluppo Lifecycle Hooks.
La soluzione in questo problema non funziona per me perché ho bisogno di conoscere il reale SIZE (w x h) del div. Il mio div ha una larghezza relativa del 33,33% e questo non cambia. Ma le dimensioni effettive del DIV sono cambiate nel fare alcune cose nella mia APP. il problema è se faccio in ngDoCheck qualcosa del genere nuovo Ruler (DOM) .measure (this.elementRef) .then ((rect: Rectangle) => {console.log (rect.width);}); } per controllare la larghezza reale ottengo un ciclo, non so perché ma chiamare masure per fare un cambiamento su dom e quindi c'è un ciclo di infetti su componente. Qualche idea? Ma posso usare questa soluzione per altri problemi =) –
'measure()' (o la promessa che restituisce) è probabilmente patch-scimmia da Zone.js, quindi quando l'evento asincrono si attiva (e dopo l'esecuzione del gestore eventi) , Il gancio di Angular esegue nuovamente il rilevamento delle modifiche. Puoi risolvere questo problema eseguendo il tuo codice al di fuori della zona Angolare. Inject [NgZone] (https://angular.io/docs/ts/latest/api/core/NgZone-class.html), quindi controlla la tua dimensione div al di fuori della zona: 'this._ngZone.runOutsideAngular (_ => { // ... controlla la dimensione div qui}); '. –
Implemento la soluzione, facendo una logica complicata relativa per verificare se ho dovuto ripristinare l'altezza, perché DoCheck viene chiamato anche su molti altri eventi, ad esempio al passaggio del mouse sul div ma non è necessario ripristinare l'altezza. DoCheck non viene richiamato sulla finestra di ridimensionamento, quindi ho anche aggiunto (finestra: ridimensiona) al componente che chiama la stessa logica per impostare e calcolare nuova altezza se necessario. –
Ci sono alcuni metodi per tenere traccia di attributo DOM modifiche:
setIntervalDOMAttrModified + propertychange per IEMutationObserverMutuationObserver funziona bene, ma ho notato che ho bisogno di un po 'più di un osservatore per attributo, perché il mio DIV WIDTH è sempre 33,33% Ho bisogno di sapere quando il SIZE calcolato reale del mio contenitore DIC è cambiato. Qualche idea? –
hai bisogno di qualcosa come 'window.getComputedStyle (elemento)' – kemsky
sì, ma quando dovrei chiamare questo? Non posso chiamarlo su MutationObserver perché l'attributo non è cambiato è ancora 33,33% –
Potrebbe fornire un plunkr ? Grazie ;-) –