[英]Child to parent communication in Angular
I have two components child and parent components each having its own directory.我有两个组件子组件和父组件,每个组件都有自己的目录。
child folder子文件夹
child.component.html child.component.html
<p>{{message}}</p>
<button (click)="sendMessage()">SendMessage</button>
child.component.ts child.component.ts
import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input('msg') message: string;
msg = 'I am child';
@Output('smEvent') sendMessageEvent = new EventEmitter<string>();
constructor() { }
ngOnInit(): void {
}
sendMessage() {
this.sendMessageEvent.emit(this.msg);
}
}
parent folder parent.component.html父文件夹parent.component.html
<app-child [msg]="testMessage" (smEvent)="sendMessageEvent($event)"></app-child>
<p>{{msgs}}</p>
parent.component.ts父组件.ts
import {Component, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
testMessage = 'test';
msgs = '';
constructor() { }
ngOnInit(): void {
}
sendMessageEvent($event) {
console.log(' child => ' + $event.msg); //returns undefined
this.msgs = $event.msg;
}
}
app.component.html app.component.html
<app-parent></app-parent>
I am able to do parent to child communication but in case of the child to parent communication, I am not able to do so.我可以进行父母与孩子的交流,但在孩子与父母的交流的情况下,我无法这样做。 How can I able to communicate and what did I miss?
我怎样才能沟通,我错过了什么?
Instead of代替
sendMessageEvent($event) {
console.log(' child => ' + $event.msg); //returns undefined
this.msgs = $event.msg;
}
You can try with this:你可以试试这个:
sendMessageEvent($event) {
console.log(' child => ' + $event);
this.msgs = $event;
}
That's because your $event is a string msg = 'I am child';
那是因为你的 $event 是一个字符串
msg = 'I am child';
. . If you send an object like:
如果您发送 object 之类的:
object = {
msg: 'I am child'
};
You could use $event.msg
你可以使用
$event.msg
According to angular.io, you can use the following way to Parent-child communication.根据angular.io,可以使用以下方式进行亲子沟通。
Child Component子组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
@Input()
get name(): string { return this._name; }
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
private _name = '';
}
Parent Component父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-name-parent',
template: `
<h2>Master controls {{names.length}} names</h2>
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
`
})
export class NameParentComponent {
// Displays 'Dr IQ', '<no name set>', 'Bombasto'
names = ['Dr IQ', ' ', ' Bombasto '];
}
Go to the following link and learn more about "Pass data from parent to child with input binding" https://angular.io/guide/component-interaction Go 到以下链接并了解有关“使用输入绑定将数据从父级传递给子级”的更多信息https://angular.io/guide/component-interaction
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.