Angular 6使用@Output在父级和子级组件之间进行通信 [英] Angular 6 Communicating between Parent&Child components using @Output
问题描述
我正在从事Angular 6项目.
I am working on an Angular 6 project.
我需要在父级和子级组件之间(从父级到子级)进行通信,但是实际上使用@Output无法实现这一点.
I need to communicate between parent and child components(from parent to child) but actually by using @Output I could not achieve this.
关于以下代码,请帮助我.
Please help me regarding the below codes.
子组件:survey.component.html
child component:survey.component.html
< div style ="text-align:center">< app-root(numberGenerated)='selectValue($ event)'></app-root>
survey.component.ts
<div style="text-align:center">
<app-root (numberGenerated)='selectValue($event)'></app-root>
survey.component.ts
import { Component, OnInit, SkipSelf , Input, Output , EventEmitter} from '@angular/core';
import { AppComponent } from '../parent/app.component'
@Component({
selector: 'app-survey',
templateUrl: './survey.component.html',
styleUrls: ['./survey.component.css']
})
export class SurveyComponent implements OnInit {
selectValue( newValue : any ) {
console.log(newValue);
}
constructor(){}
ngOnInit() {
}
}
父组件:app.component.ts
parent component: app.component.ts
import { Component, Input , Output , EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'BegumSurvey';
@Output() private numberGenerated = new EventEmitter<number>();
public generateNumber() {
const randomNumber = Math.random();
this.numberGenerated.emit(randomNumber);
}
constructor(){
}
ngOnInit() {
}
}
app.component.html
app.component.html
<button class="btn" (click)="generateNumber()">Fire event!</button>
您能不能帮助我理解为什么甚至发生火灾事件"!不打印?
Could you please help me to understand why even 'Fire event!' is not printed?
非常感谢.
感谢您的帮助.
乞
推荐答案
如果要将数据从父组件传递到子组件,则需要单独使用@Input装饰器和属性绑定.下面是根据您的说明提供的示例代码.
If you want to pass data from the parent component to the child component, then you need to use @Input decorator alone with property binding. Below is the sample code base on your clarification.
survey-child.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-survey-child',
templateUrl: './survey-child.component.html',
styleUrls: ['./survey-child.component.css']
})
export class SurveyChildComponent implements OnInit {
@Input() surveyChildValue: string;
public testValue: string;
constructor() { }
ngOnInit() {
this.testValue = this.surveyChildValue;
this.selectValue();
}
selectValue() {
console.log(this.surveyChildValue);
}
}
survey-parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-survey-parent',
templateUrl: './survey-parent.component.html',
styleUrls: ['./survey-parent.component.css']
})
export class SurveyParentComponent implements OnInit {
parentValue: string = 'Angular 6 Communicating between Parent&Child components using @Input';
constructor() { }
ngOnInit() {
}
}
survey-child.component.html
<!--This will print the Value you assignned in Parnet in UI as we use interpretation -->
<p>
{{testValue}}
</p>
survey-parent.component.html
<app-survey-child [surveyChildValue]="parentValue"></app-survey-child>
app.component.html
<router-outlet>
<app-survey-parent></app-survey-parent>
</router-outlet>
这篇关于Angular 6使用@Output在父级和子级组件之间进行通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!