角度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); 
} 

ブートストラップ4モーダルの子コンポーネントであるボタンのHTML：ボタンの子コンポーネントの

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（これはで表示されます。ボタンの子コンポーネントのための

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

活字体モーダルのHTML）。これは実際にクリックされた行からのデータを入力として受け取るべきものです。

私 onClick方法で今

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

はreceivedRowが定義されていないと言っています。私はdeletebutton HTMLとその子コンポーネントのHTMLのonClick関数呼び出しを持つ[receivedRow]='row'の間の調整が欠けているように感じます。全体的に、私はちょうど行をクリックし、ボタンをクリックして削除Boostrapモーダルを開き、正しい行を削除したいと思います。モーダル内のDeleteボタンをクリックします。明確でないコードやコードが必要な場合はお知らせください。

@Inputと@Outputを使用して、このような子コンポーネント間で実際に通信する方法はありますか？ angular2で

Answer 1

多少の回避策は、

<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でボタンコンポーネントその削除ボタンに罪それは技術的にメインページの子コンポーネントの一部です。

私の質問にもかかわらず、まだ子コンポーネント間で通信することができません。しかし、これは動作するものです。

Answer 2

、あなたのデータの流れは次のようになります。
- あなたは本当にこの道を行きたいのであれば、あなたのようなものを持っている必要があり

をイベントを送信するまで- ダウンがデータに
を渡すためにその：

私はカントー良い方法があると思う：は
アプリとユーザーのために、各行に削除ボタンがあることをお勧めします。こうすることで、ユーザーは行をクリックしてから削除ボタンをクリックすることを避けることができ、コード内では次のようなことができます：

src/appHTML：

<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でそれを理解することが重要です）。しかし、おそらくAngular2の流れを詳述するのではなく、Gitter/Angularに私に叫び声を与える必要があります:)