如何從父組件刷新數據？

Question

嗨，我想從父組件刷新我的時間戳值。

我的parentComponent.ts

public updateComponent(){
    this.timestamp = new Date();
    this.timestamp.setDate(this.timestamp.getDate() - 30);
    this.timestamp = this.timestamp.toJSON();
}

public ngOnInit() {
  this.updateComponent();
  interval(10000).subscribe(() => {
      console.error('called');
      console.error(this.timestamp);
      this.updateComponent();
  });

}

//my parent.component.html
<app-dashboard-card [refresh]="timestamp"></app-dashboard-card>



//When I catch my data
private ts: any;

@Input()
set refresh(timestamp: any) {
  console.error("TIMESTAMP CHANGE -> ", timestamp);
  this.ts = timestamp;
};

我不知道為什么時間戳更改時我的@Input無法捕獲。

Answer 1

您的代碼似乎僅在使用setInterval()在這里工作。

建議：你可以達到同樣不使用二傳位置 ; 只需將時間戳記添加到子組件中，如下所示-

@Input() timestamp: any;

ngOnChanges() {
    console.log("TIMESTAMP CHANGE -> ", this.timestamp);
}

注意：請記住檢查控制台中的日志。

Answer 2

在父組件中更改對象的引用時，將調用ngOnChanges（）

  import { Input, SimpleChanges } from "@angular/core";

  ngOnChanges(changes: SimpleChanges) {
    if (changes['refresh']) {
      //do something after value change
    }
  }