Angular6 Angular 6调用并将函数从父组件传递到子组件

在子窗体组件中有一个按钮，在from父组件中，当从子组件中单击onClose（）函数时，我希望将一个函数推送到子组件。我尝试过下面的方法，但问题是它在第一种形式上有效，但在其他形式上无效。我还想传递其他函数，包括onSubmit。要让我继续下去，我需要找出我做错了什么。我已经做了几天了，非常感谢您的帮助。谢谢

child form component, in the template url it contains the button for Onclose()

import { Component, OnInit, NgModule, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators, AbstractControl,  ValidatorFn,Form } from '@angular/forms';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
    selector: 'app-editgraphs',
    templateUrl: './editgraphs.component.html',
    styleUrls: ['./editgraphs.component.scss']
})
export class EditgraphsComponent implements OnInit {
    @Input() eGraphtitle: string;
    @Output() close: EventEmitter<any> = new EventEmitter();
    graphDataForm: FormGroup;
    constructor(private fb: FormBuilder,){}
    ngOnInit(): void {
     this.graphDataForm = this.fb.group({
    sDepartment: new FormControl(null, [Validators.required])
      });

      }

            onClose() {this.close.emit();}
            onClose2() {this.close.emit();}


parent component

import { Component, Inject, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { debug } from 'util';
import { EditgraphsComponent} from './../../../shared/forms/editgraphs/editgraphs.component'

@Component({
    selector: 'app-payments',
    templateUrl: './payments.component.html',
    styleUrls: ['./payments.component.scss']


})
export class PaymentsComponent {
    @ViewChild(EditgraphsComponent) private graphComponent: EditgraphsComponent;
    //graph modal titles
    egraph1Title: string = 'YTD Comparison Data';
constructor() {}

onClose() {

    this.graphComponent.graphDataForm.reset();
    console.log('Resseting and closing YCPC graph.');
}


onClose2() {

    this.graphComponent.graphDataForm.reset();
    console.log('Resseting and closing CMCPG graph.');
}

Parent Template URL


<app-editgraphs #graphComponent  [eGraphtitle]="egraph1Title" (close)="onClose($event)"></app-editgraphs>
    <app-editgraphs #graphComponent  [eGraphtitle]="egraph2Title" (close)="onClose2($event)"></app-editgraphs>

子表单组件，在模板url中包含Onclose（）的按钮
从“@angular/core”导入{Component，OnInit，NgModule，Input，ViewChild，Output，EventEmitter}；
从'@angular/forms'导入{FormGroup，FormBuilder，FormControl，Validators，AbstractControl，ValidatorFn，Form}；
从“ngx引导/datepicker”导入{BsDatepickerConfig}；
@组成部分({
选择器：“应用程序编辑图”，
templateUrl:'./editgraphs.component.html'，
样式URL:['./editgraphs.component.scss']
})
导出类EditGraphComponent实现OnInit{
@Input（）标题：字符串；
@输出（）关闭：EventEmitter=新的EventEmitter（）；
图形数据库：FormGroup；
构造函数（私有fb:FormBuilder，）{}
ngOnInit（）：void{
this.graphdata=this.fb.group({
sDepartment:newformcontrol（null，[Validators.required]）
});
}
onClose（）{this.close.emit（）；}
onClose2（）{this.close.emit（）；}
父组件
从“@angular/core”导入{Component，Inject，OnInit，ViewChild，ViewChildren}；
从'@angular/common/http'导入{HttpClient}；
从“util”导入{debug}；
从“./../../../shared/forms/editgraphs/editgraphs.component”导入{EditgraphsComponent}
@组成部分({
选择器：'应用程序付款'，
templateUrl:“./payments.component.html”，
样式URL:['./payments.component.scss']
})
出口类付款组件{
@ViewChild（EditGraphComponent）私有图形组件：EditGraphComponent；
//图表模态标题
egraph1Title:string='YTD比较数据'；
构造函数（）{}
onClose（）{
this.graphComponent.graphDataForm.reset（）；
log（'restating and closing YCPC graph'）；
}
onClose2（）{
this.graphComponent.graphDataForm.reset（）；
log（'restating and closing CMCPG graph'）；
}
父模板URL

函数参数法

您可以像这样传递@Input这样的函数

父组件

父模板

事件发射器方法

如果需要执行需要访问父作用域变量的函数，可以选择事件方法。 与

@Input

相反，您可以使用

@Output

这是一种从子级到父级传递事件的方式

您可以在子组件中定义事件，如下所示：

子模板

---

当我尝试从模式窗体弹出关闭按钮调用此函数时。我无法获取未定义或null referenceTypeError的属性“graphDataForm”：对象不支持属性或方法“function”。我尝试了这种方法，但问题是在加载父组件后调用函数。这不是所需的效果。我希望它只在我按下关闭按钮时调用。感谢您迄今为止的帮助，但即使该函数已传递给其他子窗体，它也不会仅重置调用的第一个窗体。我正在调用子组件的2+实例。我知道简单的方法是创建多个子组件，其中包含相同的窗体数据，但我无法理解EventEmitter方法存在的问题：将数据传递给事件您可以切换到父函数并实现您想要的任何功能我有一个按钮用于第二个按钮重置表单的事件不起作用，但它会将字符串传递给控制台。我不明白为什么它会起作用s表示第一个，而不是第二个。@NandaKishoreAllu您必须删除括号。使用括号调用函数，而不使用括号传递函数以供引用。因此您需要类似以下内容：

export class PArentComponent {

  fn = function() {
    console.log('hello');
  };
}

 <app-child [function]="fn"></app-child>

export class ChildComponent implements OnInit {

  @Input() function: any;

 ngOnInit() {
       this.function();
 }
}

export class ChildComponent implements OnInit {

 @Output() onClose = new EventEmitter();

 ngOnInit() {
 }

 closeModal() {
   // DO SOMETHING

   // emit event onClose
   this.onClose.emit();
   // you can pass also some payload into the event
   this.onClose.emit('all closed');
 }
}

<button (click)="closeModal()"></button>

<app-child (onClose)="execOnClose($event)"></app-child>

export class ParentComponent {

  execOnClose($event: any) {
    // DO SOMETHING
  }
}