Question

我正在尝试将数组传递给子组件。该数组是在父组件的onInit生命周期钩子的subscription方法中定义的。

父组件：

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

@Component({
  selector: 'selector-parent',
  templateUrl: 'parent.component.html'
})

export class ParentComponent implements OnInit {

  array: [];

  constructor() { }

  ngOnInit() {
    this.appDataService.getValues()
      .subscribe(
        value => {
          value.item
            .filter(loaded => !this.array.some(existing => existing.key === loaded.key))
            .forEach(loaded => { this.array.push(loaded) })
        }
      )
  }
}

子组件：

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

@Component({
  selector: '[selector-child]',
  templateUrl: 'child.component.html'
})

export class ChildComponent implements OnInit {

  @Input() inputArray: [];

  constructor() { }

  ngOnInit() {
    console.log(this.inputArray)
  }
}

绑定是：<tr selector-child [inputArray]="array"></tr>

不幸的是，inputArray上的控制台日志未定义。我尝试在子组件中使用ngOnChanges，但是由于某种原因，它无法识别父组件中的更改。如果没有更简单的方法来解决问题，请考虑使用服务来传递数据。

Answer 1

您必须在父组件中初始化数组：

array: [] = [];

Answer 2

我在您的子组件中看不到ngOnChanges。另外，请确保按照角度文档中指定的方式进行操作。 https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges

将更改的数组传递给子组件@Input字段

2 个答案: