在Angular 2子組件之間使用@input和@output

Question

我有一個ng-table，它是我的主頁的子組件。當單擊一行時，它使用EventEmitter通過onCellClick發送該行中的信息。我試圖將這些信息發送給另一個子組件。這恰好是一個按鈕，它是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> 

打字稿用於獲取和發送行的數據（ 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對於按鈕是自舉4模態的子組件：

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

打字稿爲按鈕子組件：

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'之間的協調，其中我有我的deletebutton HTML和onClick函數調用在該子組件的HTML。總體而言，我只想單擊一行，單擊按鈕打開刪除Boostrap Modal，並刪除正確的行，然後單擊模式內的Delete按鈕。讓我知道是否有什麼不清楚或需要更多代碼。

實際上有一種方法可以像這樣使用@Input和@Output在子組件之間進行通信嗎？

Answer 1

有點解決的辦法是將Delete

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

而且還是假表的標籤在主網頁的HTML喜歡我了吧：

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

現在該行的數據被髮送的HTML爲表部件類似這樣的按鈕組件刪除按鈕sin它在技術上是主頁面的子組件的一部分。

仍然無法在子組件之間進行通信，就像我在我的問題中詢問的那樣。但是這是有效的。

Answer 2

隨着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（這裏troncated到類只）：

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

這裏有一個工作Plunkr：http://plnkr.co/edit/hNhcdraoDNnI2C92TQvr?p=preview

現在，如果你真的想要使用輸入/輸出屬性，您應該查找教程，因爲這裏的結構似乎有點困惑。我可以幫助你理解（並且用angular2來理解它很重要！）但是也許你應該給我留言Gitter/Angular而不是詳述這裏的Angular2流程:)