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

Question

我正在从事一个Angular 6项目。

我需要在父母和子女组件之间进行交流（从父母到子女），但实际上，通过@output我无法实现。

请帮助我了解以下代码。

儿童组件：soundus.component.html

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

您能帮我了解为什么即使是"火灾事件！"不是打印吗？

非常感谢。

任何帮助都将不胜感激。

begum

Answer 1

如果要将数据从父组件传递给子组件，则需要单独使用@input Decorator，并使用属性绑定。以下是您澄清的示例代码基础。

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>

在此处输入图像描述

Answer 2

我需要在父母和子女组件之间进行交流（从父母到子女），但实际上，通过@output我无法实现。

@Output用于儿童到父母的互动。您需要的是使用@Input（父母到孩子的互动）：

parent component（app.ts）：

this.numberGenerated = Math.random();

parent component（app.html）：

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

儿童组件（soundus.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属性。更多在这里：角组件相互作用

Answer 3

带有@output和EventEmitter，这是相反的。您可以将数据从孩子传递给父组件。再次在孩子中，我们声明了一个变量，但是这次是@输出装饰器和一个新的EventEmitter