Geek Answers Handbook

Angular2 change infinite loop detection in Firefox

I accidentally discovered that there are several triggers that can trigger an endless loop of change detection in Firefox in an Angular2 application.

I reproduced one on Plunker: http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK

The ScrollToFixed plugin performs some basic manipulations with dom and applies some styles. However, if you scroll through the Home section and then the Sidebar section, you will see that doCheck is called endlessly.

I was also able to trigger an endless loop in Firefox by running a marker on a Google map to start the animation.

An infinite loop does not occur in IE, Safari or Chrome. I'm not sure if this is a problem with Angular2 or Firefox, but I cannot find the source of the problem.

app.ts

import {Component, View, bootstrap, DoCheck} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ templateUrl: 'template.html' }) export class App implements DoCheck{ constructor() { $('#sidebar').scrollToFixed(); } doCheck(){ console.log('do check') } } bootstrap(App);

template.html

 <div id="main">Main </div> <div id="sidebar">Sidebar <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> Sidebar bottom </div>

style.css

 * { box-sizing:border-box; } #main { float: left; width: 66.66667%; height:10000px; } #sidebar { overflow:scroll; float: left; width: 33.33333%; background-color: #f9f8f9; height:200px; }

index.html

 <!DOCTYPE html> <html> <head> <title>angular2 playground</title> <link href="style.css" rel="stylesheet" /> <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="config.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed.js"></script> <script> System.import('app') .catch(console.error.bind(console)); </script> </head> <body> <my-app> loading... </my-app> </body> </html>
+8
javascript firefox angular
source share
1 answer

I'm not sure why this only happens in Firefox and why it generates an infinite loop, but the error you indicated indicates that you are trying to apply $('#sidebar').scrollToFixed(); before the sidebar is created. By default, Angular does not display DOM objects in the constructor. The sidebar will only be available after initializing the DOM with Angular. You can put your code in ngAfterViewInit and it will work.

You can read https://angular.io/guide/lifecycle-hooks for more information.

0
source share

More articles:


All Articles