Angular - 如何从父组件调用函数到子组件答案

【问题标题】：Angular - How to invoke function from parent to child componentAngular - 如何从父组件调用函数到子组件
【发布时间】：2021-04-07 04:11:53
【问题描述】：

我有这种情况：父组件以这种方式构造：

 import { Component, OnInit } from '@angular/core';

 @Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
 })
 export class ParentComponent implements OnInit {

   constructor() { }

   ngOnInit() {
   }

 }

使用这个 html（父级有一个 ng-content）：

 <div>
  <ng-content></ng-content>
  <button>Click to say Hello!!!</button>
 </div>

还有一个像这样的子组件：

 import { Component, OnInit } from "@angular/core";

 @Component({
   selector: "app-child",
   templateUrl: "./child.component.html",
   styleUrls: ["./child.component.css"]
 })
 export class ChildComponent implements OnInit {

  onSubmit() {
    alert("hello");
  }

  constructor() {}

  ngOnInit() {}
 }

使用这个 html：

 <div>I'm child component</div>

我想从父组件点击内部按钮调用 onSubmit 子函数...这可能吗？

<app-parent>
 <app-child>
 </app-child>
</app-parent>

这是一个示例；我正在创建一个具有默认按钮的模式：“取消”和“成功”。在成功按钮上，我需要调用在 childrenComponent 中声明的一个函数。

这是 stackblitz 示例：https://stackblitz.com/edit/angular-ivy-vuctg4

【问题讨论】：

onSubmit() 是否需要在孩子中？它可以移动到服务中吗？
有很多方法可以做到这一点，您可以使用服务与子组件通信并使其执行您想要的任何操作，或者使用子组件中的输入设置器执行任何功能。 .....
如果您的父母有一个@ContentChild(ChildComponent) child;，您可以从父母那里创建一个if (this.child) this.child.onSubmit() 或.html <button (click)="child && child.onSubmit()"。最好检查一下“孩子”是否真的存在
@Eliseo 内部组件的名称可以更改...我不能使用 contentChild 我认为...
它是组件的“类”的名称。如果您有不同的组件，您可以尝试使用尽可能多的 ContentChild 或使用服务在组件之间进行通信，因为两者之间没有关系：angular.io/guide/…

标签： javascript angular typescript

【解决方案1】：

你可以这样访问

app.component.html

<hello name="{{ name }}"></hello>

<app-parent (clickActionCB)="clickActionCB($event)">
    <app-child></app-child>
</app-parent>

app.component.ts

import { Component, VERSION, ViewChild } from "@angular/core";
import { ChildComponent } from "./child/child.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild(ChildComponent) childRef: ChildComponent;
  clickActionCB(eventData) {
     this.childRef.onSubmit() ;
  }
}

parent.component.ts

import { Component, EventEmitter, OnInit, Output } from "@angular/core";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
  @Output() clickActionCB = new EventEmitter<string>();
  clickAction() {
    this.clickActionCB.emit();
  }
}

parent.component.html

<div>
    <ng-content></ng-content>
    <button (click)="clickAction()">Click to say Hello!!!</button>
</div>

Live stackblitz URL

【讨论】：

不......它不能工作......子组件可以改变......我认为我不能使用这个解决方案

【解决方案2】：

child.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-child",
  template: `
    <div>I'm child component</div>
  `
})
export class ChildComponent implements OnInit {
  onSubmit() {
    alert("hello");
  }
  constructor() {}

  ngOnInit() {}
}

parent.component.ts

import { ChildComponent } from "../child/child.component";

@Component({
  selector: "app-parent",
  template: `
    <div>
      <ng-content></ng-content>
      <button (click)="onClick()">Click to say Hello!!!</button>
    </div>
  `
})
export class ParentComponent implements OnInit {
  @ContentChild(ChildComponent) childRef: ChildComponent;
  constructor() {}

  ngOnInit() {}

  onClick() {
    this.childRef.onSubmit();
  }
}

https://stackblitz.com/edit/angular-ivy-mteusj?file=src%2Fapp%2Fparent%2Fparent.component.ts

【讨论】：