角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

角度2を使用していて、requireを使用する必要がない場合は、パスを指定するだけです。

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