Angular2 eventEmitter、親はそれをキャッチしない

Question

親がイベントを受信せず、関数を呼び出す理由を調べようとしています。

は、私は製品が追加されたとき、親コンポーネントを通知したい（AppComponentと呼ばれる）親アプリと（HomeComponentと呼ばれる）の子コンポーネント

HomeComponent.ts

@Component({ 
selector: 'home-component', 
providers: [], 
moduleId: module.id, 
encapsulation: ViewEncapsulation.None, 
templateUrl: 'home.component.html', 
styleUrls: ['home.component.css'], 
directives: [BannerComponent], 
}) 

export class HomeComponent { 

    @Output() selected = new EventEmitter<boolean>(); 

    products: Array<Product> = []; 

    isProductSelected: boolean = false; 

    constructor(public productService: ProductService) { 


    } 

    addProductToBasket(product: Product) { 

     // Add product to basket. 
     this.productService.addProduct(product); 
     this.isProductSelected = true; 

     if (this.isProductSelected) { 
      console.log("Event has been emittet"); 
      this.selected.emit(this.isProductSelected); 

      //Sets to default 
      this.isProductSelected = false; 
     } 

    } 

} 

を持っていますバスケットに。コンソールをチェックし、その行を見ることができますconsole.log（ "イベントはemittetされています"）;が呼び出されているので、イベントを送信する必要があります。

AppComponent.htmlここ

<aside class="aside" [ngClass]="{'aside-active': isClassVisible }"> 
    <div class="basket_products" *ngFor="#product of products"> 


    </div> 
</aside> 

<router-outlet (selected)="selected($event)"></router-outlet> 

私はこの方法で呼び出す必要があり（選択）= "選択（$イベント）"を使用しようとしました後、私は、ngForを使用していますAppComponent.ts

AppComponent.ts

selected(selected: boolean) 
{ 
    console.log("Event catches"); 

    if (selected) { 

     // Get new data 
     this.totalProducts = this.productService.getTotalProducts(); 
     this.totalprice = this.productService.getTotalProductPrice(); 
     this.shippingPrice = this.productService.getShippingPrice(); 
    } 
} 

メソッドが呼び出されないという問題があります。

がステップ「親は、子イベントをリッスン」に従うしようとしたことがありますが、ここでAngluar2 interactions参照：

は

ここで誰もが、私が間違って行っている見ているんでしょうか？

Answer 1

このコードは、本当に意味

@Injectable() 
export class HomeComponent { 

    @Output() selected = new EventEmitter<boolean>(); 

を作成しないか、それはコンポーネントであり、それは代わりに@Injectable()デコレータの@Component(...)デコレータを必要とします。

それがサービスである場合、それは実際にあなたが唯一このコンポーネントの任意の要素に

<home-component (selected)="selected($event)"></home-component> 

ないで聞くことができるコンポーネントである場合、それは@Output()

を持つことはできません。これはHomeComponentはselector: '.basket_products'