Question

我正在从事Angular 6项目。

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

关于以下代码，请帮助我。

子组件：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装饰器和属性绑定。下面是根据您的说明提供的示例代码。

col-md-12

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() {
  }

}

enter image description here

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属性。这里还有更多信息：Angular component interaction

Answer 3

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

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

3 个答案: