Przypadkowo odkryłem, że istnieją pewne wyzwalacze, które mogą powodować nieskończoną pętlę wykrywania zmian w Firefoksie w aplikacji Angular2.Angular2 zmiana wykrywania nieskończona pętla w Firefox
Mam replikowane jeden na Plunker: http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK
Wtyczka ScrollToFixed robi kilka podstawowych manipulacji DOM i stosuje niektóre style. Jeśli jednak przewiniesz sekcję "Główne", a następnie "Pasek boczny", zobaczysz, że funkcja doCheck jest wywoływana w nieskończoność.
Mogłem również wywołać nieskończoną pętlę w przeglądarce Firefox, uruchamiając znacznik na mapie Google, aby rozpocząć animację.
Nieskończona pętla nie występuje w IE, Safari ani Chrome. Nie jestem pewien, czy jest to problem z Angular2 lub Firefox, ale nie mogę znaleźć źródła problemu.
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>
arkusz.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>