Com*_*olf 7 javascript firefox typescript angular
我随机发现有一些触发器可以在Angular2应用程序中导致Firefox中的无限更改检测循环.
我在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>
我不确定为什么这种情况只发生在 Firefox 中以及为什么它会生成无限循环，但抛出的错误表明您尝试$('#sidebar').scrollToFixed();在创建侧边栏之前应用。默认情况下，Angular 的构造函数中尚未渲染任何 DOM 元素。侧边栏只有在 Angular 初始化 DOM 后才可用。您可以将代码放入 ngAfterViewInit 中，它将起作用。
您可以阅读https://angular.io/guide/lifecycle-hooks了解更多信息