Angular2 RC2表达式在检查后发生了变化。

3
我从RC1升级到RC2后收到了这个神秘的信息 - “Expression has changed after it was checked”。代码非常简单。父组件有两个子组件“sister”和“brother”。在初始化之后,姐姐发出一个事件,该事件被分配给父变量,而兄弟的Input()属性绑定到同一变量。我认为这是使用父变量进行兄弟组件之间的“经典”通信。它在RC1中起作用,但在RC2中不起作用。我检查了CHANGELOG.md,但没有找到线索。我做错了什么? http://plnkr.co/edit/HMPAbImpWWeZrVjHyb6H?p=preview
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
      selector: 'brother',
      template:'<h2>Brother has {{present}}</h2>'
})
export class Brother{
  @Input() present: string;
}

@Component({
  selector: 'sister',
  template:'<h2>Sister has {{_present}}</h2>'
})
export class Sister{
  @Output() present: EventEmitter<string> = new EventEmitter; 
  public _present: string = 'something';
  ngOnInit(){
    this.present.emit(this._present);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <h2>Parent has {{present}}</h2>
      <brother [present]="present"></brother>
      <sister (present)="present=$event"></sister>
    </div>
  `,
  directives:[Brother,Sister]
})
export class AppComponent {
  public present: string;
}
2个回答

7

是的,它有些改变了。具体来说:

修复(facade):将 EventEmitter 默认更改为同步 (#8761)

https://github.com/angular/angular/commit/e5904f4

因此,如果您将代码从以下内容更改为:

@Output() present: EventEmitter<string> = new EventEmitter; 

to:

@Output() present: EventEmitter<string> = new EventEmitter(true); 

然后它应该可以工作,你将得到相同的行为。

另请参见https://github.com/angular/angular/blob/master/modules/%40angular/facade/src/async.ts#L152

http://www.bennadel.com/blog/3071-synchronous-vs-asynchronous-eventemitters-in-angular-2-beta-14.htm


神奇,我的问题消失了。你能否给我指点一些关于同步/异步等方面的更多信息? - Vladimir Turygin

1

Angular会按照顶部到底部的方式处理模板,首先检查兄弟组件,其次检查姐妹组件。姐妹组件会触发同步事件并在兄弟组件被检查后立即更改兄弟组件的字段。在调试模式下,Angular会检测到这种错误,在生产模式下,这种更改将不会被检测到(模板不会更新),直到下一次检测器通过。您可以更改应用程序模板中组件的顺序,以使错误消失:

  <sister (present)="present=$event"></sister>
  <brother [present]="present"></brother>

我已经过度简化了代码。姐妹和兄弟是对称的。他们俩必须同时在第一位。这似乎是不可能的。你的解决方法有效!谢谢你的时间。 - Vladimir Turygin
被接受的答案解决了我的问题(我无法更改组件的顺序)。我投了赞成票,因为它让我明白了发生了什么。 - Stephen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接