Angular 4에서 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법

Angular 4에서 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하려고 할 때.콘솔에 정의되지 않은 메시지가 표시됩니다.데이터가 배열 형식입니다.

parent.component.vmdk

<div class="section welcome-section fp-section fp-table" *ngFor="let section of sections">
    <div class="fp-tableCell">
      <app-question-card [data]="section"></app-question-card>
    </div>
  </div>

child.component.ts

@Input() data;
  question = [];
  constructor() {
    this.question = this.data;
  }

  ngOnInit() {
    console.log(this.question); //returns undefined
  }

값이 아직 채워지지 않았기 때문에 생성자에서 할당을 수행할 수 없습니다. 이 작업은 다음에서 수행되어야 합니다.ngOnInit당신이 가치를 확인하는 것처럼.

@Input() data;
question = [];

constructor() {
}

ngOnInit() {
  this.question = this.data;
  console.log(this.question);
}

다음을 사용하여 수행할 수 있습니다.Input()장식가아래 코드 참조 -

parent.component.ts -

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

child.component.ts -

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      Say {{ childMessage}}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

추가 정보

각도 라이프사이클에 따라 ngOnInit를 사용하여 입력 값을 초기화합니다.

@Input() data;


constructor() {
}

ngOnInit() {
  let question = this.data;
  console.log(this.question);
}

Input()의 도움으로 데이터를 전달할 수 있습니다.

Child.html

<app-chart [userDetails]='<< JSON OBJ | ANY VALUE WHICH YOU WANT TO PASS >>'></app-chart>

chart.component.ts

@Input() userDetails: any = [];

ngOnInit() {
    console.log(this.userDetails); // as per angular Lifecycle use the ngOnInit for initializing input values
}

언급URL : https://stackoverflow.com/questions/45189314/how-to-pass-data-from-parent-to-child-component-in-angular-4