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屋！