Question

我有一个奇怪的问题。我使用@Input将数据从父级传递到子级组件。数据将通过订阅进行更新，但更改值后不会传递给子组件。

父组件

<app-family-tab [pheno]="pheno" [samples]="ids"></app-family-tab>

public ids: string[] = [];
this.subscriptions.push(this.sampleSearch.results.subscribe(s => {
    this.ids = s.samples;
    this.cd.detectChanges();
}));

子组件

import { Component, ChangeDetectorRef, OnDestroy, Input, Output, EventEmitter, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-family-tab',
  templateUrl: './family-tab.component.html',
  styleUrls: ['./family-tab.component.css']
})
export class FamilyTabComponent implements AfterViewInit {
  @Input() pheno: any;
  @Input() samples: string[];
  constructor() { }

  ngAfterViewInit(){
    console.log(this.samples);
  }

}

样本未在子组件上更新

Answer 1

ngAfterViewInit()仅被调用一次（请参阅documentation）。您可能想使用Input来监视ngOnChanges()属性，该属性在每次Input更改时都会运行。

您可以使用SimpleChanges参数来做到这一点：

ngOnChanges(changes: SimpleChanges) {
  console.log(changes);
}

console.log应该返回一个对象，该对象具有您的属性名称作为键以及先前值和当前值：

{
  samples: { 
    currentValue: {...}, 
    firstChange: true|false, 
    previousValue: {...} 
  }
}

Answer 2

private _samples;
@Input()
set samples(data) {
  console.log(data);
  this._samples = data;
}

这样，您应该在数据更改后立即获得console.log

@Input装饰器在值更改时不起作用

2 个答案: