Question

我有一个ng-table，它是我主页的子组件。单击某行后，它会使用onCellClick通过EventEmitter发送该行中的信息。我正在尝试将此信息发送给另一个子组件。这恰好是一个按钮，它是Bootstrap 4模式的子项，当单击主页面上的按钮时会弹出该按钮。只是在接收和处理该信息时遇到问题。

子组件表的HTML：

<ng-table [config]="config"
      (tableChanged)="onChangeTable(config)"
      (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns">
</ng-table>

子组件的HTML（这显示在主页的HTML中）：

<app-datatable (row)="received($event)"></app-datatable>

获取和发送行数据的Typescript（this.row是EvenEmitter。data.row是点击的实际行：

@Output() row: EventEmitter<any> = new EventEmitter<any>();
public onCellClick(data: any): any {
  let d = data.row.tDataPoint;
  let i = data.row.tICCP;
  let s = data.row.tStartDate;
  let e = data.row.tEndDate;
  let toSend:DataTable = new DataTable(d, i, s, e);
  this.row.emit(toSend);
}

按钮的HTML，它是Bootstrap 4模式的子组件：

<button type="submit" class="btn" data-dismiss="modal" (click)="onClick($event)">Delete</button>

按钮子组件的Typescript：

selector: 'deletebutton'
@Input() receivedRow:DataTable;
onClick(message:DataTable){
  this.sender.emit('This is from On Click Deletebutton');
  console.log("On Click Deletebutton");
  console.log(this.receivedRow);
  for (let entry in DPS){
    if (DPS[entry].tDataPoint===message.tDataPoint){
    DPS.splice(parseInt(entry),1);
    }
  }
}

按钮子组件的HTML（它出现在模态的HTML中）。这实际上应该是从点击的行接收数据作为输入。

<deletebutton [receivedRow]='row'></deletebutton>

我的onClick方法现在说receivedRow未定义。我觉得缺少的是我[receivedRow]='row' HTML deletebutton与该子组件HTML的onClick函数调用之间的协调。总的来说，我只想单击一行，单击按钮打开删除Boostrap模式，并删除正确的行我单击模态内的Delete按钮。如果某些事情不清楚或需要更多代码，请告诉我。

实际上是否有一种方法可以使用@Input和@Output？

在子组件之间进行通信

Answer 1

对于angular2，您的数据流应为：
- 向下传递数据
- 最多发送活动

所以，如果你真的想这样做，你应该有类似的东西：

我觉得有更好的方式：
对于您的应用和您的用户，最好在每一行都有一个删除按钮。通过这种方式，它可以避免用户混淆点击一行，然后点击删除按钮，在您的代码中，您将能够执行以下操作：

src / app.html ：

<table class="table">
  <tr *ngFor="let row of tableData">
    <td *ngFor="let column of row.columns">
      {{ column.name }}
    </td>

    <td (click)="deleteRow(row)"><button>X</button></td>
  </tr>
</table>

<button (click)="addRow()">Add a row</button>

src / app.ts （此处仅限于班级）：

@Component({
  selector: 'app',
  templateUrl: `./src/app.html`,
})
export class App {
  private tableData;
  private cptRow = 1;

  constructor() {
    this.tableData = [
      {
        idRow: `idR${this.cptRow++}`,
        columns: [
          {idColumn: 'idR1C1', name: 'Column 1-1'},
          {idColumn: 'idR1C2', name: 'Column 1-2'},
          {idColumn: 'idR1C3', name: 'Column 1-3'}
        ]
      },
      {
        idRow: `idR${this.cptRow++}`,
        columns: [
          {idColumn: 'idR2C1', name: 'Column 2-1'},
          {idColumn: 'idR2C2', name: 'Column 2-2'},
          {idColumn: 'idR2C3', name: 'Column 2-3'}
        ]
      },
      {
        idRow: `idR${this.cptRow++}`,
        columns: [
          {idColumn: 'idR3C1', name: 'Column 3-1'},
          {idColumn: 'idR3C2', name: 'Column 3-2'},
          {idColumn: 'idR3C3', name: 'Column 3-3'}
        ]
      }
    ];
  }

  deleteRow(row) {
    // we can do this by reference ...
    // this.tableData = this.tableData.filter(r => r !== row);

    // or by ID
    this.tableData = this.tableData.filter(r => r.idRow !== row.idRow);
  }

  addRow() {
    this.tableData.push({
      idRow: `idR${this.cptRow}`,
      columns: [
        {idColumn: `idR${this.cptRow}C1`, name: `Column ${this.cptRow}-1`},
        {idColumn: `idR${this.cptRow}C2`, name: `Column ${this.cptRow}-2`},
        {idColumn: `idR${this.cptRow}C3`, name: `Column ${this.cptRow}-3`}
      ]
    });

    this.cptRow++;
  }
}

这是一个有效的普朗克：http://plnkr.co/edit/hNhcdraoDNnI2C92TQvr?p=preview

现在，如果你真的想使用输入/输出属性，你应该寻找教程，因为这里的结构似乎有点困惑。我可以帮助你理解（用angular2来理解它是很重要的！）但也许你应该在Gitter/Angular给我一个喊叫，而不是在这里详细说明Angular2流程：）

Answer 2

解决方法是将删除按钮组件放在表组件的HTML中，如下所示：

DROP DATABASE `dbnameendingin#`

仍然将表格的标签留在主页面的HTML中，就像我拥有它一样：

<ng-table [config]="config"
      (tableChanged)="onChangeTable(config)"
      (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns">
</ng-table>
<deletebutton [receivedRow]='toSend'></deletebutton>

现在行的数据被发送到该删除按钮，因为它在技术上是主页的子组件的一部分。

仍然无法像我在问题中提到的那样在子组件之间进行通信。但这有点紧密有效。

在Angular 2子组件之间使用@input和@output

2 个答案: