[英]Angular - How to invoke function from parent to child component
I have this situation: A parent component structured in this way:我有这种情况:以这种方式构造的父组件:
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() {
}
}
with this html (parent has an ng-content):使用此 html (父级具有 ng-content):
<div>
<ng-content></ng-content>
<button>Click to say Hello!!!</button>
</div>
and a child component like this:和这样的子组件:
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() {}
}
with this html:使用此 html:
<div>I'm child component</div>
From the parent component I want to click inside button to invoke onSubmit child function...is this possible?从父组件我想单击内部按钮来调用 onSubmit 子 function ...这可能吗?
<app-parent>
<app-child>
</app-child>
</app-parent>
This is a sample;这是一个样本; I'm creating a modal that has default buttons: "CANCEL" and "SUCCESS".
我正在创建一个具有默认按钮的模式:“取消”和“成功”。 On the success button I need to invoke one function declared into the childrenComponent.
在成功按钮上,我需要调用一个声明到 childrenComponent 中的 function。
This is the stackblitz example: https://stackblitz.com/edit/angular-ivy-vuctg4这是 stackblitz 示例: https://stackblitz.com/edit/angular-ivy-vuctg4
You can access like that你可以这样访问
app.component.html app.component.html
<hello name="{{ name }}"></hello>
<app-parent (clickActionCB)="clickActionCB($event)">
<app-child></app-child>
</app-parent>
app.component.ts 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父组件.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父组件.html
<div>
<ng-content></ng-content>
<button (click)="clickAction()">Click to say Hello!!!</button>
</div>
child.component.ts 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父组件.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 https://stackblitz.com/edit/angular-ivy-mteusj?file=src%2Fapp%2Fparent%2Fparent.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.