Javascript Angular 2将单击事件传递给可重用的通用组件

我有几个组件使用基本相同的表，所以我正在抽象出该表。我已经解决了大多数动态表填充需求，但尚未找到以下问题的解决方案

在我的一个表实例中，需要单击行。在原始表中，我只是在行中添加了一个click事件，并让它调用我的typescript文件中的一个函数

既然该表是任何消费组件的子表，我不确定如何动态添加此单击事件。以下是我试图实现的基本目标：

HTML:
<tr class="someClass" <!-- want click event here -->>
  <td *ngFor="let column of row;"><div [innerHtml]="column"></div></td>
</tr>

我在这里实现了父HTML中的泛型表

Parent HTML:
<oma-generic-table [visibleData]="visibleData"></oma-generic-table>

---

我不确定这是简单还是不简单。我是Angular 2的新手，如果这个问题过于简单，我很抱歉。提前感谢您的帮助

据我所知，Angular2不会以这种方式绑定到“（单击）”事件。它可能看起来很难看，但我会将NgIf指令添加到click事件应该作用的行的表中，并将逻辑反向应用到不应该受click事件影响的另一行。例：

在HTML中使用这个

<tr *ngIf="!isClickable" class="someClass">
 <tr *ngIf="isClickable" class="someClass" #click>
  <td *ngFor="let column of row;"><div [innerHtml]="column"></div></td>
 </tr>

希望能帮助您
您的通用表可以发出父组件可以订阅的自定义事件：

@Component({
    selector: 'oma-generic-table',
    template: `
        <table>
            <tr *ngFor="let row of visibleData" class="someClass" (click)="selectRow(row)">
              <td *ngFor="let column of row;"><div [innerHtml]="column"></div></td>
            </tr>
        </table>
    `
})
export class OmaGenericTable {

    @Input() visibleData: VisibleDataRow[];

    @Output() select = new EventEmitter<VisibleDataRow>();

    selectRow(row: VisibleDataRow) {
        this.select.emit(row);
    }
}

@组件({
选择器：“oma通用表”，
模板：`
`
})
导出类OmaGenericTable{
@Input（）visibleData:VisibleDataRow[]；
@Output（）select=neweventemitter（）；
选择行（行：VisibleDataRow）{
this.select.emit（行）；
}
}

然后在父组件中：

// in template
<oma-generic-table 
        [visibleData]="visibleData" 
        (select)="tableRowSelected($event)"
></oma-generic-table>

// in component
tableRowSelected(r: VisibleDataRow) {
    console.log(`Selected row ${r}`);
}

//在模板中
//组件中
tableRowSelected（r:VisibleDataRow）{
log（`Selected row${r}`）；
}
感谢您提供这一优雅的解决方案。我确实有几个问题。1.“VisibleDataRow”在何处声明？传入的对象是一个复杂的对象，其中包括表标题和行数组以及一些其他属性。我不确定VisibleDataRow代表什么，或者我最初的解释是否不够充分。道歉，如果这是误导。2.为了使clickable函数成为可选函数，我正在考虑向任何希望使行可单击的家长传递一个字符串'style=“cursor:pointer”“。这是一种黑客手段吗？再次感谢！1.因为您在问题中没有指定任何类型的行，所以我只使用VisibleDataRow来表示它。“visibleData”是您可能拥有的任何类型对象的数组。2.您可以添加另一个输入参数[Selective]=“true”以启用/禁用表行选择。在OmaGenericTableComponent内部，您可以使用“@HostBinding（'class.selectable'）@input（）selectable:boolean；”声明基于此输入参数绑定必要的css类。
<tr *ngIf="!isClickable" class="someClass">
 <tr *ngIf="isClickable" class="someClass" #click>
  <td *ngFor="let column of row;"><div [innerHtml]="column"></div></td>
 </tr>

export class GenericTableComponent implements OnInit {
    @Input() visibleData;
    @ViewChild('click') protected _click:ElementRef;

    constructor(enderer: Renderer) {
        renderer.listen(this._click.nativeElement, 'click', (event) => {
            // Do something with 'event'
        })
    }
}

@Component({
    selector: 'oma-generic-table',
    template: `
        <table>
            <tr *ngFor="let row of visibleData" class="someClass" (click)="selectRow(row)">
              <td *ngFor="let column of row;"><div [innerHtml]="column"></div></td>
            </tr>
        </table>
    `
})
export class OmaGenericTable {

    @Input() visibleData: VisibleDataRow[];

    @Output() select = new EventEmitter<VisibleDataRow>();

    selectRow(row: VisibleDataRow) {
        this.select.emit(row);
    }
}

// in template
<oma-generic-table 
        [visibleData]="visibleData" 
        (select)="tableRowSelected($event)"
></oma-generic-table>

// in component
tableRowSelected(r: VisibleDataRow) {
    console.log(`Selected row ${r}`);
}