Angular2 eventEmitter, parent wont catch it

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>(); 

Либо это компонент, то он нуждается в @Component(...) декоратор вместо @Injectable() декоратора.

Если это услуга, то она не может иметь @Output()

Если это на самом деле является компонентом, то вы только можете слушать на этом компоненте

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

не на произвольном элементе. Это не слушать @Output() selected ...

<div class="basket_products" *ngFor="#product of products" (selected)="selected($event)"> 

кроме случаев, когда HomeComponent имеет селектор LIKE selector: '.basket_products'