檢測孩子內部的 Input() 值變化（角度）

Question

我只需要在輸入值更改時更新子組件，子組件有一些輸入參數，這些參數在 ngInit() 中設置了一些局部變量，但問題是父組件在更改輸入參數時子組件不會更新，因為 ngInit() 只觸發一旦初始化。

內部父級

<app-site-parameter-tbl *ngIf="siteTbl==true" [siteParameterTDataSet]="siteParameterDataSet" [siteParameterTGridColumns]="siteParameterColumns" [siteParameterFoot]="siteParameterFooter" [siteParameterT]="siteParameterTbl" [model]="siteModel" [bckColor]="this.tabBackColor"></app-site-parameter-tbl>

在某些觸發事件上，父級會更改這些屬性（作為子級的輸入）

父母 Ts

method(ds, columns, footer) {

    this.siteParameterDataSet = ds;
    this.siteParameterColumns = columns;
    this.siteParameterFooter = footer;
}

即使在更改輸入值后也僅命中一次

兒童 ts

@Input() siteParameterT: boolean;
@Input() model: SiteModel;
@Input() siteParameterFoot: [];
@Input() siteParameterTGridColumns: [];
@Input() siteParameterTDataSet: any;

ngOnInit() {
    debugger;
    //setting local variables then they will render inside html

    this.siteParameter = this.siteParameterT;
    this.site = this.model;
    this.foot = this.siteParameterFoot;
    this.dataSet = this.siteParameterTDataSet;
}

請幫助，如果我可以直接在 html 中使用 Input 屬性，那么我怎么可以對其進行更改？ 幫我知道如何在輸入更改時通知？

Answer 1

嘗試在@Input上使用 setter：

@Input('siteParameterT')
set siteParameterT(value: boolean) {
    this.siteParameter = value
}

此外，您可以使用ngOnChanges

Answer 2

改為掛鈎ngOnChanges ：

示例用法

  @Input() employee: Employee

  ngOnChanges(changes: SimpleChanges) {
    /** Fire any time employee changes */
    if (changes.employee && changes.employee.currentValue) {
      this.formGroup.patchValue(this.employee)
    }
  }

---

還有一個裝飾器方法。 盡管請注意 TypeScript 裝飾器是實驗性的。

Answer 3

您可以使用ngOnChanges實現該功能。

 public ngOnChanges(changes: SimpleChanges): void {
    this.siteParameter = changes.siteParameter;
    etc.,
  }