使用@Output在父组件和子组件之间通信的角6

Question

我正在做一个6角的项目。

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

请帮助我了解以下代码。

儿童component:survey.component.html

<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

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>

你能帮我理解一下为什么“火灾事件”吗？不是印刷的？

非常感谢。

任何帮助都是非常感谢的。

贝古姆

Answer 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>

​

在这里输入图像描述

Answer 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属性。更多信息在这里：角分量相互作用

Answer 3

对于@Output和EventEmitter，情况正好相反。您可以将数据从子组件传回父组件。同样，在子表中，我们声明了一个变量，但这次使用@Output装饰符和一个新的EventEmitter