角2コンポーネントの子でメソッドのメソッドをコンポーネントの親に送信する方法

Question

子コンポーネントから入力フィールドを消去しようとすると、親コンポーネントのメソッドdelete（）をアクティブにする@Output情報によって転送されます。

ありがとうございました

Answer 1

あなたはEventEmitterと@Outputを使用していることacomplishことができます。

をスニペットを以下では、あなたが目的のデータを渡すためにpassDataToParent()関数を呼び出すことができます。

child.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 
    @Component({ 
     selector: 'app-child-component', 
     templateUrl: './child.component.html', 
     styleUrls: ['./child.component.css'] 
    }) 

    export class ChildComponent implements OnInit { 
     // ******** Important part ****** 
     @Output() emitter: EventEmitter<any[]> = new EventEmitter(); 
     dataToEmit : any = "data to pass to parent component"; 

      constructor() {} 

      ngOnInit() { } 

      //Call this function to pass data 
      passDataToParent() { 
      this.emitter.emit(this.dataToEmit); 
      } 
    } 

parent.component.ts親HTMLで最後に

import { Component, OnInit, ViewChild } from '@angular/core'; 
    import { ChildComponent } from './child-component'; 

    @Component({ 
     selector: 'app-parent-component', 
     templateUrl: './parent.component.html', 
     styleUrls: ['./parent.component.css'] 
    }) 

    export class ParentComponent implements OnInit { 

     // ******** Get reference of child component ****** 
     @ViewChild(ChildComponent) child : ChildComponent ; 

      constructor() {} 

      ngOnInit() { } 

      receiveDataFromChild(data) { 
       console.log(data); 
      } 
    } 

parent.component.html

<app-child (emitter)="receiveDataFromChild($event)"></app-child > 

希望します。

Answer 2

eventEmitterを使用してください。ここでは選択したアイテムの値を削除しましたが、アイテムを削除できます。非同期レンダリング問題の場合、uはTrueの出力EventEmitterを使用できます。

I made example here

@Input() items: any[]; 
    @Input() selectedItem: any; 
    keys: string[] = []; 

    @Input() sorting: string; 

    @Output() selectedItemChange = new EventEmitter<any>(true);