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

时间:2016-11-14 13:16:38

标签: html angular typescript twitter-bootstrap-4

我有一个ng-table,它是我主页的子组件。单击某行后,它会使用onCellClick通过EventEmitter发送该行中的信息。我正在尝试将此信息发送给另一个子组件。这恰好是一个按钮,它是Bootstrap 4模式的子项,当单击主页面上的按钮时会弹出该按钮。只是在接收和处理该信息时遇到问题。This is the main page. The Bootstrap modal pops up whe the center button of the set of three is clicked. Bootstrap modal

子组件表的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?

在子组件之间进行通信

2 个答案:

答案 0 :(得分:1)

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

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

diagram

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

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流程:)

答案 1 :(得分:0)

解决方法是将删除按钮组件放在表组件的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>

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

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