Ho scoperto casualmente che in un'applicazione Angular2 sono presenti alcuni trigger che possono causare un ciclo di rilevamento di modifiche infinite in Firefox.Loop infinito di rilevamento cambiamento angolare in Firefox
ho replicato uno su Plunker: http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK
Il plugin ScrollToFixed fa qualche manipolazione di base dom e applica alcuni stili. Tuttavia, se si scorre la sezione "Main" e quindi la sezione "Sidebar", si vedrà che doCheck è chiamato infinitamente.
Sono stato anche in grado di attivare un ciclo infinito in Firefox attivando un marker all'interno di una mappa di Google per avviare l'animazione.
Il ciclo infinito non si verifica in IE, Safari o Chrome. Non sono sicuro se si tratta di un problema con Angular2 o Firefox, ma non riesco a trovare la fonte del problema.
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>