Angular 2 - 點擊事件沒有觸發

Question

我有一個組件，它有一個點擊事件。

以下是部分TS：

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'product-summary', 
    template: require('./product.summary.component.html'), 
    styles: [require('./product.summary.component.css')] 
}) 
export class ProductSummaryComponent { 
    @Input() product:Product; 

    onSel() { 
     console.log('here'); 
     alert('here'); 
     //return null; 
    } 
} 

interface Product { 
    productId: number; 
    title: string; 
    price: number; 
} 

的HTML是：

<div class="media"> 
    <div class="media-left"> 
    <a href="/product/{{product.slug}}-{{product.productId}}"> 
     <img class="media-object" src="{{product.images[0].url}}" alt="..."> 
    </a> 
    </div> 
    <div class="media-body"> 
    <a class="media-heading" (click)="onSel()"> {{product.title}} -- </a> 
     <p>{{product.affiliateDescription}}</p> 
    </div> 
</div> 

這是非常簡單的東西，我想鏈接被點擊時斷火的功能，該函數是onSel，但我得到以下錯誤：

TypeError: self.context.onSel is not a function 
    at _View_ProductSummaryComponent0._handle_click_13_0 (ProductSummaryComponent.ngfactory.js:140) 
    at vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:21981 
    at vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:24201 
    at vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:24314 
    at ZoneDelegate.invoke (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:64962) 
    at Object.onInvoke (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:18525) 
    at ZoneDelegate.invoke (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:64961) 
    at Zone.runGuarded (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:64858) 
    at NgZoneImpl.runInnerGuarded (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:18554) 
    at NgZone.runGuarded (vendor.js?v=u9vw3RWCrrPEr9h-uTQy9f7M85Vi5yqGVH6fAaX9XN8:18787) 

任何想法可能是什麼原因造成這種情況？任何幫助將不勝感激。

謝謝。

Answer 1

如果你正在使用angular 2. +你不需要使用require，你只需要使用path。

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'product-summary', 
    template: './product.summary.component.html', 
    styles: ['./product.summary.component.css'] 
}) 
export class ProductSummaryComponent { 
    @Input() product:Product; 

    onSel() { 
     console.log('here'); 
     alert('here'); 
     //return null; 
    } 
} 

interface Product { 
    productId: number; 
    title: string; 
    price: number; 
}