Question

在我的child.component中，我有一个serivce调用，它返回一个对象数组，invoiceRes，并将它分配给一个全局变量。看起来像这样：

  invoiceCases;

    this.casesService.getCaseByInvoice(invoice.invoiceNumber)
    .subscribe(invoiceRes => {
      this.invoiceCases = invoiceRes;
    },
    err => {
      console.log(err);
    })

在我的父组件中，我试图用ngOnChange（）来捕获这个变量的更新，如下所示：

@Input() invoiceCases;

ngOnChanges(event) {

 if (event.invoiceCases) {
   this.casesCheck();
 }
}

然而，ngOnChange没有捕获invoiceCases从服务调用的响应中分配数组。

非常感谢任何帮助。

Answer 1

根据您提供的问题和评论，您尝试将事件从子级传递到父级，在这种情况下，您可以通过两种方式处理

（i）使用共享的 service ，它作为单个实例进行管理。因此，如果每个组件都访问该服务，他们将访问相同的共享数据。

（ii）使用@output事件发射器，如果它们相互依赖（直接关系）

Answer 2

正如其他一些用户所提到的，听起来你需要在父组件中使用@output发射器。

export class ParentComponent {
  @Output() public invoiceCases;
}

然后在您的子组件中，您可以使用输入属性

export class ChildComponent {
  @Input() public invoiceCases;
}

您问题的另一部分可能是检测到更改的问题。 ngOnChanges只会检测数组中的浅层变化。因此，如果数组中对象上的特定属性发生更改，则可能需要使用ngDoCheck（在子组件内）。

private differ: KeyValueDiffer<any, any>;    
constructor(private differs: KeyValueDiffers){
  this.differ = differs.find({}).create();
}

public ngDoCheck() {
  const changes = this.differ.diff(this.invoiceCases);
  if (changes) {
    this.casesCheck();
  }
}

使用@Input属性Angular 5传递数组

2 个答案: