Использование @input и @output между Угловыми 2 дочерними компонентами

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> 

Машинопись для получения и отправки данные строки (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> 

Машинопись для компонента кнопки ребенка:

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 и вызов функции onClick в HTML для этого дочернего компонента. В общем, я просто хочу щелкнуть строку, нажать кнопку, чтобы открыть удаление Boostrap Modal, и удалить правильную строку. Я нажимаю кнопку Delete внутри модального. Дайте мне знать, если что-то неясно или требуется больше кода.

Действительно ли существует способ связи между дочерними компонентами, такими как @Input и @Output?

Answer 1

Отчасти работа вокруг заключается в том, чтобы поместить Удалить компонент кнопки в HTML для компонента таблицы, как это:

<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> 

А теперь данные строки, отправляемого к этой кнопке Delete 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

Теперь, если вы на самом деле хотите использовать свойства ввода/вывода, вы должны искать учебники, потому что структура здесь кажется немного запутанной. Я могу помочь вам понять это (и это важно понять с помощью углового2!), Но, возможно, вы должны дать мне крик на Gitter/Angular вместо того, чтобы детализировать поток Angular2 здесь :)