Угловой 2 - Не нажатие на событие клика

Question

У меня есть компонент, который имеет событие click.

Вот это компонент ц:

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