Question

我在子窗体组件中有一个按钮，在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>

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

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

1 个答案: