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

Angular 2 - 点击事件未触发

1 个答案: