Angular2：进行双向绑定时，是否需要显式使用 EventEmitter？

Question

假设我有一个看起来像这样的厨房 class：

@Component({
    template: `
        <kitchen [(kitchenLunch)]=lunch></kitchen>  
    `
})
export class House {

    private lunch: Lunch;

}

House 组件：

包含一个子组件Kitchen
房子有一个包含一些状态的数据模型。
房子在数据模型上设置了与厨房的双向绑定
当房子或厨房更改 dataModel 时，更改应该出现在两个地方。

我的问题是关于 Kitchen 中 @Output 的语法。这是我目前正在使用的：

@Component({
    selector: 'kitchen',
    template: '...'
})
export class Kitchen {

    @Input  
    private kitchenLunch: Lunch;

    @Output 
    private kitchenLunchChange: EventEmitter<any> = new EventEmitter();

}

这目前如我所料。每当我更新 Kitchen 组件中的 kitchenLunch 时，我都会执行以下操作：

this.kitchenLunch = **Something**
this.kitchenDataModelChange.next(this.kitchenDataModel);

然而，这似乎有点多余。我真正想做的是缩短厨房 class 来做这样的事情：

@Component({
    selector: 'kitchen',
    template: '...'
})
export class Kitchen {

    @Input  
    @Output 
    private kitchenLunch: Lunch;

}

然后当我更新 kitchenLunch 时，我想这样做：

this.kitchenLunch = **Something**

问题：

是否可以将私有成员作为输入和输出？
你能有一个不是 EventEmitter 的 @Output 吗？
这里有我can/should用的简写吗？
看起来 @Output 必须与输入相同的名称加上 Change。在这种情况下 kitchenLunch + Change。我通过反复试验弄清楚了这一点。这在哪里记录？

Answer 1

您不必使用 Ouput EventEmitter 双向绑定。

但是，建议将单向绑定与 EventEmitter 一起使用，因为它可能会给您带来更好的性能。简而言之，它减少了 Angular 2 应该执行的变化检测量。

此处有更多详细信息http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/

Answer 2

1) 不知道，但我想它可行。应该很容易找到。

2) 没有

3) 没有

4) https://angular.io/docs/ts/latest/guide/template-syntax.html

[(ngModel)] is a specific example of a more general pattern in which Angular "de-sugars" the [(x)] syntax into an x input property for property binding and an xChange output property for event binding. Angular constructs the event property binding's template statement by appending =$event to the literal string of the template expression.

[(x)]="e" <==> [x]="e" (xChange)="e=$event"

We can write a two-way binding directive of our own to exploit this behavior.

Angular2：进行双向绑定时，是否需要显式使用 EventEmitter？

Angular2: When doing two-way binding, do I need to explicitly use an EventEmitter?

angular2-template

angular