2016-06-22 2 views
3

Я обновил с RC1 до RC2 и получил это загадочное сообщение - «Выражение изменилось после его проверки». Код очень прост.
Родительский компонент имеет двух детей «сестра» и «брат». Сразу после init сестра выдает событие, которое назначено переменной родителя, а свойство брака связано с одной и той же переменной. Я думаю, что это «классическая» связь между компонентами братьев и сестер с использованием переменной родителя.
Раньше он работал в RC1, но не RC2. Я проверил CHANGELOG.md, но не нашел подсказки. Что я делаю не так? http://plnkr.co/edit/HMPAbImpWWeZrVjHyb6H?p=previewAngular2 RC2 Expression изменилось после его проверки.

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. Моя проблема уходит. Не могли бы вы рассказать мне больше о sync/async и т. Д.? –

1

Угловые обрабатывает шаблон сверху-вниз, брат проверяется первым, сестра проверяется второй. Сестра запускает синхронное событие и меняет поле брата сразу после его (брата). Угловой обнаруживает такие ошибки в режиме отладки, в режиме производства это изменение останется незамеченным (шаблон не будет обновляться) до следующего прохождения детектора. Вы можете изменить порядок компонентов в шаблоне приложения, и ошибка исчезнет:

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

Я упростил код. Сестра и брат симметричны. Оба они должны быть на первом месте одновременно. Это кажется невозможным. Ваше обходное решение работает! Спасибо за ваше время. –

+0

Принятый ответ исправил мою проблему (я не могу изменить порядок компонентов). Я голосовал, потому что это имело смысл, что происходит. – Stephen

Смежные вопросы