angular6 - Angular 6调用函数并将其从父组件传递给子组件

Question

我在子表单组件中有一个按钮，在父组件中有一个按钮，当从子组件中单击 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>

Answer 1

函数参数方法

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

父组件

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

事件发射器方法

如果您需要执行需要访问父作用域变量的函数，您可以选择事件方法。与@Input相反，您可以使用@Output，这是从子级到父级通信事件的角度方式。

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

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>

这段代码使用 (onClose) 拦截 onClose 事件，并执行父组件的 execOnClose() 方法。

让我们看看父组件

export class ParentComponent {

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