Angular - 如何从父组件到子组件调用 function

Question

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

 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 子 function ...这可能吗？

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

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

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

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

父组件.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();
  }
}

父组件.html

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

实时堆栈闪电战 URL

Answer 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() {}
}

父组件.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