javascript - Angular2 değişiklik tespiti sonsuz döngü Firefox'ta

Rastgele olarak, bir Angular2 uygulamasında Firefox'ta sonsuz bir değişiklik algılama döngüsüne neden olabilecek bazı tetikleyiciler olduğunu buldum.

Bunun bir kopyasını Plunker'da çoğalttım: http://plnkr.co/edit/VTS89eJkePLrJjuoDzOK

ScrollToFixed eklentisi bazı temel DOM manipülasyonları yapar ve bazı stiller uygular. Ancak "Ana" bölümünü ve sonra "Yan Menü" bölümünü kaydırırsanız, doCheck'in sonsuz bir şekilde çağrıldığını göreceksiniz.

Ayrıca bir Google haritası içindeki bir işaretleyiciyi animasyon başlatacak şekilde tetileyerek Firefox'ta sonsuz bir döngü başlatmayı da başarabildim.

Sonsuz döngü IE, Safari veya Chrome'da meydana gelmiyor. Bunun Angular2 veya Firefox ile ilgili bir sorun olup olmadığından emin değilim, ama sorunun kaynağını bulamıyorum.

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>

Cevap #1

Bunun neden sadece Firefox'ta olduğunu ve neden sonsuz döngü oluşturduğunu tam olarak bilmiyorum, ancak atılan hata, $ ('#sidebar').scrollToFixed(); uygulamaya çalıştığınızı, ancak yan menü henüz oluşturulmadan önce olduğunu gösteriyor. Angular'da varsayılan olarak, constructor içinde henüz hiçbir DOM elemanı render edilmemiştir. Yan menü, sadece Angular tarafından DOM başlatıldıktan sonra kullanılabilir hale gelecektir. Kodunuzu ngAfterViewInit içine koyabilirsiniz ve çalışacaktır.

Daha fazla bilgi için https://angular.io/guide/lifecycle-hooks adresini okuyabilirsiniz

Cevap #2

Yaşam döngüsünde check kullanırken dikkatli olunmalı ve sonsuz döngüye girip girmeyeceğini doğrulamak gerekir (uygulamanızın takılmasına neden olabilir); benzer bir sorunla karşılaştım (Yaşam döngüsü kancası) ngAfterContentInit() ile çözüldü.

İlgili makaleler