如何在Angular 4中将数据从父组件传递到子组件答案

【问题标题】：How to pass data from parent to child component in Angular 4如何在Angular 4中将数据从父组件传递到子组件
【发布时间】：2017-12-24 15:38:29
【问题描述】：

当我尝试将数据从父组件传递到子组件时。我在控制台中收到未定义的消息。数据是数组的形式。

parent.component.html

<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 在ngOnChanges 之前不可用
输入属性不应该已经在 ngOnInit 中水合了吗？
constructor => ngOnChanges => ngOnInit => ngAfterContentInit ...
@Jota.Toledo ngOnChanges 在ngOnInit 之前被解雇

标签： angular typescript

【解决方案1】：

借助 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
}

【讨论】：

【解决方案2】：

根据角度生命周期使用 ngOnInit 初始化输入值

@Input() data;


constructor() {
}

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

【讨论】：

对不起，我没有仔细阅读上述答案。会记住这些:)

【解决方案3】：

可以使用Input()decorator 来完成。请参阅下面的代码 -

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

}

更多Information

【讨论】：

【解决方案4】：

你不能在构造函数中进行赋值，因为值还没有被填充，它应该在ngOnInit 中完成，就像你检查值一样。

@Input() data;
question = [];

constructor() {
}

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

【讨论】：

您好@Igor，我的要求几乎与单击按钮时需要从父组件获取子组件的Id相同。但是我收到了这个错误Template parse errors: Can't bind to 'editId' since it isn't a known property of 'button'.你能帮忙吗？ stackblitz.com/edit/angular-duduth
请在Stack Overflow@aananddham 上提出新问题，在现有问题或答案的 cmets 中提出问题是本论坛的错误位置。
如何获取@Input 中的更新数据？我的父组件中有一个数组，在父组件中更新 API 请求数据后，如何使用更新的数据更新我的子组件。
@NajamUsSaqib - 请创建一个包含所有相关信息的新问题。尝试在您的问题中创建minimal reproducible example。
我设法通过onChanges解决了这个问题。