Angular 6使用@Output在父子组件之间进行通信答案

【问题标题】：Angular 6 Communicating between Parent&Child components using @OutputAngular 6使用@Output在父子组件之间进行通信
【发布时间】：2019-03-08 17:00:43
【问题描述】：

我正在做一个 Angular 6 项目。

我需要在父组件和子组件之间进行通信（从父组件到子组件），但实际上通过使用 @Output 我无法实现这一点。

请帮助我了解以下代码。

子组件：survey.component.html

<div style="text-align:center"> <app-root (numberGenerated)='selectValue($event)'></app-root> 调查.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

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

<button class="btn" (click)="generateNumber()">Fire event!</button>

能否请您帮助我理解为什么会出现“火灾事件！”没有打印出来？

非常感谢。

感谢任何帮助。

贝格姆

【问题讨论】：

对不起，我忘了打个招呼:)
应该可以，但我很困惑......似乎调查组件是父组件，而应用程序组件是子组件。在您的问题中，您的意思是不同的。

标签： angular

【解决方案1】：

如果要将数据从父组件传递到子组件，则需要单独使用 @Input 装饰器和属性绑定。以下是基于您的说明的示例代码。

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>

enter image description here

【讨论】：

你好。感谢您的回答。
但是，我有一个问题，console.log(this.surveyChildValue) 是“未定义”。你能帮我谈谈原因吗？谢谢。
您是否在 CSS 选择器中传递了 parentValue，如下所示。。基本上，当您在模板中声明选择器时，parentValue 变量将传递给子组件。您还必须使用相同的变量名称，即surveyChildValue
我需要使用服务吗？
没有。不需要服务。服务的目的是进行 HTTP 调用以从您的 Rest API 中引入数据。请把代码发给我。它适用于我，我已在我的答案中附上了屏幕截图。

【解决方案2】：

我需要在父组件和子组件之间进行通信（从父组件到子组件），但实际上通过使用 @Output 我无法实现这一点。

@Output 用于孩子与父母的互动。你需要的是使用@Input（父子交互）：

父组件（app.ts）：

this.numberGenerated = Math.random();

父组件（app.html）：

<app-survey [newValue]="numberGenerated"></app-survey>

子组件（survey.component.ts）：

import { Component, OnInit, SkipSelf , Input, Output, Input, 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 {

  @Input() newValue;
  ...

@Output 是孩子的 EventEmitter 属性。更多内容在这里：Angular component interaction

【讨论】：

但是根据OP的代码，app组件是这里的孩子。说 op 在 survey component 中有标签：<app-root (numberGenerated)='selectValue($event)'></app-root> 所以我很困惑：D
@AJT_82 他在问题中指出survey component 是app component 的孩子。但是通过代码，是的，就像你说的那样。虽然 OP 的声明 (from parent to child) but actually by using @Output 不正确，因为 @Output 是子事件发射器属性的装饰器。
大家好。谢谢你的评论。我正在尝试理解输入输出组件，所以也许我写错了:)

【解决方案3】：

使用 @Output 和 EventEmitter 则相反。您可以将数据从子组件传递回父组件。再次在孩子中，我们声明一个变量，但这次使用@Output 装饰器和一个新的 EventEmitter

【讨论】：