Ich habe zufällig gefunden, dass es einige Trigger gibt, die eine unendliche Änderungserkennungsschleife in Firefox in einer Angular2 App verursachen können.Angular2 Change Detection Endlosschleife in Firefox
habe ich eine auf Plunker repliziert: http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK
Das ScrollToFixed Plugin hat einige grundlegende Manipulation dom und einige Arten gilt. Wenn Sie jedoch im Abschnitt "Main" und dann im Abschnitt "Sidebar" blättern, sehen Sie, dass doCheck unendlich aufgerufen wird.
Ich konnte auch eine Endlosschleife in Firefox auslösen, indem ich einen Marker in einer Google-Karte auslöst, um mit der Animation zu beginnen.
Die Endlosschleife tritt nicht in IE, Safari oder Chrome auf. Ich bin mir nicht sicher, ob dies ein Problem mit Angular2 oder Firefox ist, aber ich kann die Ursache des Problems nicht finden.
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>