8
Angular2アプリでFirefoxで無限変化検出ループを引き起こす可能性のあるトリガーがランダムに見つかりました。FirefoxのAngular2変化検出無限ループ
私はPlunker上のものを複製しています：http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK
ScrollToFixedプラグインは、いくつかの基本的なDOM操作を行い、いくつかのスタイルが適用されます。しかし、 "Main"セクションと "Sidebar"セクションをスクロールすると、doCheckが無限に呼び出されます。
Googleマップ内のマーカーをトリガしてアニメーションを開始することで、Firefoxで無限ループを引き起こすこともできました。
IE、Safari、またはChromeでは無限ループは発生しません。これがAngular2またはFirefoxの問題であるかどうかはわかりませんが、問題の原因を見つけることはできません。
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>