Angular2 eventEmitter，父母不會捕獲它

已經使用了相當一段時間了，試圖找出父母沒有收到事件並調用函數的原因。Angular2 eventEmitter，父母不會捕獲它

有一個父應用程序（稱爲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（「Event has been 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：

是否有人在這裏，看到我做了什麼錯？

來源

2016-07-22 Mikkel

此代碼並沒有真正意義

@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有一個像selector: '.basket_products'

來源

2016-07-22 16:50:37

其選擇的成分..遺憾的混淆。 – Mikkel

請從組件中刪除'@Injectable（）'。你只需要它的服務，但不是像@Component（），@ @ Directive（）'，'@Pipe（）'等其他裝飾器已經在那裏。這些裝飾器包括'@Injectable（）' –

好的，做到了。我並沒有真正關注你想告訴我的事情。現在我正在使用路由，並加載家庭組件如： – Mikkel

Angular2 eventEmitter，父母不會捕獲它

回答

相關問題