小编Com*_*olf的帖子

我一般都是Angular2和Angular的新手,并且在组件的数据发生更改后更新dom后尝试获取一些jQuery.jQuery需要计算元素的高度,所以我不能完全使用数据.不幸的是,看起来onAllChangesDone只在数据更改后触发,而不是dom.

我试图在触发事件监听器后更新视图.但是,未检测到更改,并且在检测到其他更改之前不会更新.

import {
  Component, View, bootstrap
} from 'angular2/angular2';

@Component({
  selector: 'app'
})
@View({
  template: '{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>'
})
class App {
  keyword;
  autocomplete;
  click;
  
  constructor() {
    var _this = this;
    var input = (document.getElementById('keyword'));
    this.autocomplete = new google.maps.places.Autocomplete(input);
    google.maps.event.addListener(this.autocomplete, 'place_changed', function(){
      console.log('place change');
      _this.keyword = "updated text";
      _this.click = "not clicked";
    });
    this.keyword = "original text";
    this.click = "click me after selection is made to force change";
  }
  
  update() {
    console.log("click");
    this.click = "clicked";
  }
  
}

bootstrap(App); …

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