Question

我随机发现有一些触发器可以在Angular2应用程序中导致Firefox无限更改检测循环。

我在Plunker上复制了一个：http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK

ScrollToFixed插件执行一些基本的dom操作并应用一些样式。但是，如果您滚动＆＃34; Main＆＃34;部分，然后是＆＃34;边栏＆＃34;你会看到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>

Answer 1

我不确定为什么这只会在Firefox中发生以及它为什么会生成无限循环，但抛出的错误表示您尝试在创建侧边栏之前应用$('#sidebar').scrollToFixed();。默认情况下，在构造函数的Angular中，尚未呈现DOM元素。边栏只有在通过Angular初始化DOM后才可用。您可以将代码放在ngAfterViewInit中，它将起作用。

您可以阅读https://angular.io/guide/lifecycle-hooks了解更多信息

Answer 2

每当在生命周期中使用 check 时，都应该小心并确认是否不无限运行（可能会挂断您的应用）；我遇到了类似的问题（生命周期挂钩）ngAfterContentInit()已解决。

Angular2在Firefox中改变检测无限循环

2 个答案: