Angular 6 调用并将函数从父组件传递给子组件 [英] Angular 6 call and pass a function from parent to child component

问题描述

我在子窗体组件和来自父组件中有一个按钮，当从子组件内单击 onClose() 函数时，我想将一个函数推送到子组件.我已经尝试了下面的方法，但问题是它可以在第一种形式上工作，但不能在其余形式上工作.我还想传递其他函数，包括 onSubmit.为了让我继续，我需要弄清楚我在这里做错了什么.我已经在这几天了，现在感谢任何帮助.谢谢

I have a button in a child form component and in the from parent component I want to push a function to the child component when the onClose() function is clicked from within the child component. I've tried the method below but the issue is it will work on the first form but not the rest. I would also like to pass other functions as well, including a onSubmit. For me to proceed I will need to figure out what i'm doing wrong here. I've been at this for a few days now any help is appreciated.Thanks

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>

推荐答案

函数参数方法

你可以像这样传递一个像@Input这样的函数.

You can pass a function like an @Input like this.

父组件

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

EventEmitter 方法

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

If you need to execute a function that needs to access parent scope variables you could choose an event approach. Contrary to @Input you can use @Output that is the angular way to communicate events from child to parent.

您可以像这样在子组件中定义一个事件:

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>

然后在您的父组件的模板中，您可以像 angular 中的所有其他事件一样捕获子组件的事件:

Then in your Parent Component's template you can catch child component's event like all other events in angular:

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

这段代码用(onClose)拦截一个onClose事件并执行父组件的execOnClose()方法.

This piece of code intercepts an onClose event with (onClose) and executes parent component's execOnClose() method.

那么我们来看看父组件

export class ParentComponent {

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

这篇关于Angular 6 调用并将函数从父组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！