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

Question

我随机发现有一些触发器可以在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>

Answer 1

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

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

Answer 2

每当使用check in生命周期时，应该小心并确认是否不运行无限（可能会挂起你的应用程序）; 我面临类似的问题（生命周期钩子） ngAfterContentInit()已经解决。

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

问题描述

2 个解决方案

解决方案1
0 2017-11-02 10:35:13

解决方案2
0 2018-10-17 13:01:23

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

问题描述

2 个解决方案

解决方案1 0 2017-11-02 10:35:13

解决方案2 0 2018-10-17 13:01:23

解决方案1
0 2017-11-02 10:35:13

解决方案2
0 2018-10-17 13:01:23