是什麼在angular2

Question

這兩個事件之間的區別是什麼在angular2這兩個事件之間的區別：

<rb-recipes-list (recipeSelected)="selectedRecipe = $event"></rb-recipes-list> 

和

<rb-recipe-item [recipe]="recipe" (click)="onSelected(recipe)"></rb-recipe-item> 

而且他們爲什麼不能寫同樣的方式。他們有什麼關係。

下面都寫在同一組件：

@Output() recipeSelected = new EventEmitter<Recipe>(); 

    onSelected(recipe: Recipe) { 
     this.recipeSelected.emit(recipe); 
     console.log(recipe); 
     } 

是新來的angular2。

Answer 1

<rb-recipes-list (recipeSelected)="selectedRecipe = $event"></rb-recipes-list> 

這裏(recipSelected)是自定義事件（不是內置的JavaScript事件）。通常當你想從孩子觸發任何事件和send data母公司或當你在父組件要fire a custom event和execute any function所以你需要，如下所示內rb-recipes-list component與EventEmitter和輸出的API聲明它，

import {Component, EventEmitter, Output} from '@angular/core'; 
@Component({..}) 
export class RbRecipesListComponent{ 
    @Output rbRecipesList = new EventEmitter();   //<<<=== way to declare custom event 

    // Then you can fire this anywhere like this, 
    // 1st way 

    somefun(){ 
    this.rbRecipesList.emit('Angular2')  

    //rbRecipesList now emits value(Angular2) which will be received 
    //by $event defined in parentController eg. (recipeSelected)="selectedRecipe = $event" 
    // So Angular2 will be assinged to selectedRecipe variable. 

    } 

} 

OR

parentControll呃

<rb-recipes-list (recipeSelected)="onSelected($event)"></rb-recipes-list> 
                 //<<<==changed line 

export class parentController(){ 
    onSelected(value){ 
     this.selectedRecipe=value;      //<<<===Angular2 will be assigned to selectedRecipe 
    } 
} 

import {Component, EventEmitter, Output} from '@angular/core'; 
    @Component({..}) 
    export class RbRecipesListComponent{ 
     @Output rbRecipesList = new EventEmitter();  //<<<=== way to declare custom event 

     // Then you can fire this anywhere like this, 
     // 2st way 

     somefun(){ 
     this.rbRecipesList.emit('Angular2')  

     //rbRecipesList now emits value(Angular2) which will be received by $event 
     // This time onSelected() function will be fired at a same time 
     // So Angular2 will be assinged to selectedRecipe variable. 

     } 

    } 

---

<rb-recipe-item [recipe]="recipe" (click)="onSelected(recipe)"></rb-recipe-item> 

這是正常的的JavaScript（Angular2定義）單擊事件。所以一旦rb-recipe-item是點擊,onSelected()將在父母控制器中被解僱。

export class parentController(){ 
     onSelected(){} 
}