Angular 2如何将组件子组件中的方法发送到组件父组件

Question

我试图从子组件中删除一个输入字段，它由 @Output 信息传输，该信息将激活父组件中的方法 delete()!

提前致谢

Answer 1

您可以使用 EventEmitter 和 @Output 完成:

在下面的代码片段中，您可以调用 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

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

最终在父 HTML 中

parent.component.html

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

希望对您有所帮助!