Angular 6 Обмен данными между родительским и дочерним компонентами с помощью @Output

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 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 и EventEmitter все наоборот.Вы можете передавать данные обратно от дочернего к родительскому компоненту.Снова в дочернем элементе мы объявляем переменную, но на этот раз с декоратором @ Output и новым EventEmitter

Answer 3

Мне нужно установить связь между родительским и дочерним компонентами (от родительского к дочернему), но на самом деле с помощью @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.Больше здесь: Угловое взаимодействие компонентов