Angular 2将单击事件传递到可重复使用的通用组件

Question

我有几个组件，这些组件基本上使用了同一表，因此我正在抽象该表。我已经解决了我的大多数动态表人群所需的需求，但尚未找到以下解决方案。

在我的表中之一中，需要单击行。在原始表中，我只需在该行中添加一个单击事件，然后在我的打字稿文件中调用函数。

现在，该表是任何消费组件的孩子，我不确定如何动态添加此点击事件。这本质上是我要实现的目标：

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

这是表打字稿文件，其中所有数据都在visibledata对象上：

export class GenericTableComponent implements OnInit {
    @Input() visibleData;
    constructor() { }
    ngOnInit() {
    }
}

我在我的父html中实现了通用表

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

这是父母准备数据的功能。我试图将点击事件存储在字符串中并传递它，但是到目前为止我尝试过的所有操作都失败了（数据绑定{{}}，square brackets等。）。

transformData(visibleData) {
    const ret: any = {};
    ret.headings = visibleData.headings;
    ret.action = '(click)="rowClicked([row.id])"';
    ret.checkbox = this.checkBox;                                                   //add if the table needs checkboxes
    ret.content = [];
    for (let i = 0; i < visibleData.content.length; i++) {
        ret.content.push(_.values(_.omit(visibleData.content[i], 'id')));
    }
    return ret;
}

但是，即使将硬编码用于孩子，单击事件也无法识别父级的功能，我会收到以下错误：

EXCEPTION: Error in ./GenericTableComponent class GenericTableComponent - inline template:35:4 caused by: self.parentView.context.rowClicked is not a function
ORIGINAL EXCEPTION: self.parentView.context.rowClicked is not a function

我不确定这是否简单。我是Angular 2的新手，所以如果这个问题很简单，我深表歉意。事先感谢您的任何帮助。

Answer 1

您的通用表可以发射自定义事件，父母可以订阅哪个parent compond：

@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}`);
}

Answer 2

angular2据我所知，以这种方式不会绑定到"（click）"事件。它看起来可能很丑陋，但是我会将NGIF指令添加到单击事件应采取的行动的表上的表中，并将逻辑呈负相反，将逻辑应用于不应受到点击事件影响的另一行。例如：

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

然后，您可以从实例化表组件的任何地方将ISClickable变量作为输入传递到表中。

Answer 3

在html

中使用它

<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'
        })
    }
}

希望帮助您