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

Question

Suppose that I have a Kitchen class that looks like this:

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

    private lunch: Lunch;

}

The House component:

• Contains a sub-component Kitchen
• The house has a dataModel containing some state.
• The house has setup two-way binding with the kitchen on the dataModel
• When the house or kitchen changes the dataModel, the changes should appear in both places.

My question is on the syntax of the @Output in the Kitchen. This is currently what I am using:

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

    @Input  
    private kitchenLunch: Lunch;

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

}

This currently works as I expect. Whenever I update the kitchenLunch in the Kitchen component, I do the following:

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

However, this seems slightly redundant. What I would really like to do is shorten the Kitchen class to do something like this:

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

    @Input  
    @Output 
    private kitchenLunch: Lunch;

}

Then when I update kitchenLunch, I would like to just do this:

this.kitchenLunch = **Something**

Questions:

1. Is it possible to have a private member be an input & output?
2. Can you have an @Output that is not an EventEmitter?
3. Is there some short hand that I can/should use here?
4. It looks like the @Output must be named the same as the input plus Change . In this case kitchenLunch + Change . I figured this out by trial and error. Where is this documented?

Answer 1

1) don't know but I guess it works. Should be easy to find out.

2) no

3) no

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.

Answer 2

You don't have to use Ouput EventEmitter with two-way binding.

However, it's recommended to use one-way binding together with EventEmitter because it may give you better performance. Briefly, it reduces amount of change detection Angular 2 should perform.

More details here http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/