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; 
}