2016-06-22 2 views
3

RC1에서 RC2로 업데이트되었고 "이 확인 된 후에 표현식이 변경되었습니다"라는이 비밀스러운 메시지가 나타납니다. 코드는 매우 간단합니다.
상위 구성 요소에는 두 개의 자식 "sister"와 "brother"가 있습니다. init 직후에 자매는 부모의 변수에 할당 된 이벤트를 내고 동생의 Input() 속성은 동일한 변수에 바인딩됩니다. 부모의 변수를 사용하는 형제 컴포넌트 간의 "클래식"통신이라고 생각합니다.
이전에는 RC1에서는 작동했지만 RC2에서는 작동하지 않았습니다. CHANGELOG.md를 확인했지만 단서를 찾지 못했습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? http://plnkr.co/edit/HMPAbImpWWeZrVjHyb6H?p=previewAngular2 RC2 표현식이 점검 된 후 변경되었습니다.

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; 
} 

답변

7

네, 약간 변경되었습니다. 특히

수정 (외관) : 변경 EventEmitter는 기본적으로 동기화 할 (# 8761) 당신의 코드를 변경한다면

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

:

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

에 :

@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

+0

Magic. 내 문제가 사라진다. 싱크/비동기에 관한 더 많은 정보를 알려주십시오. –

1

각도하여 상하 형제가 먼저 체크 템플릿을 처리하고, 제 여동생 판정한다. 자매는 동기 이벤트를 발생시키고 형제 필드를 바로 변경합니다 (형제). Angular는 디버그 모드에서 이러한 종류의 오류를 감지하고, 프로덕션 모드에서이 변경 사항은 다음 탐지기가 통과 할 때까지 탐지되지 않습니다 (템플릿은 업데이트되지 않습니다). 앱 템플릿의 구성 요소 순서를 변경하면 오류가 사라집니다.

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

참조하십시오. 누이와 형제는 대칭입니다. 동시에 둘 다 첫 번째 장소에 있어야합니다. 이것은 불가능한 것처럼 보인다. 해결 방법이 효과가 있습니다! 시간 내 주셔서 감사합니다. –

+0

허용 된 대답으로 내 문제가 해결되었습니다 (구성 요소의 순서를 변경할 수 없음). 나는 무슨 일이 일어나고 있는지 이해했기 때문에 투표했습니다. – Stephen