typescript - 在從 Angular 6.1 更新到 9 後，@Input() 帶有 null 值

在子元件中使用 @Input() 有什麼變化嗎？我的某些子元件會取得 null 值，但如果我把 IvyCompiler 設為 false，它們就會重新正常工作並接收值。我在文件中讀到這個，但對我來說，關於 @Input() 和在子元件中的使用有什麼變化還不是很清楚：

指令的未綁定輸入（例如 name in ）現在會在檢視創建時設置，且在變更檢測運行之前（以前，所有輸入都是在變更檢測期間設置的）。

https://angular.io/guide/ivy-compatibility#changes-you-may-see

答案＃1

就像我在我的元件中已經提到的那樣。你的元件的輸入在設定器中彼此相互依賴。例如，你有這段程式碼：

@Input()
set show(show: boolean) {
  if (show === true && this.action === "update") {
    this.exchange();
  }
  this._show = show;
}

在組件創建時，輸入實際上有一個特定的設定順序。我記不起哪個屬於哪個版本，但他們在 ivy 中確實改變了這種行為。所以它要麼取決於你在父模板中定義的順序，要麼取決於輸入在組件本身中定義的順序。

但如我之前提到的，你的程式碼不應依賴於這種行為，你應該將這個邏輯移到 ngOnChanges 鉤子中。這個鉤子會先被調用，甚至在 ngOnInit 之前。在這裡，你可以確定父模板中定義的所有輸入都已被設置。這將把你的程式碼改為：

ngOnChanges(changes: SimpleChanges): void {
  // here both `show` and `action` input will be set at the first `ngOnChanges` call  
  if (changes.show && this.show && this.action === 'update') {
    this.exchange();
  }
}

請注意，這僅會在 show 輸入從外部變更時被調用，而不是來自組件自身。為此，您需要更改組件的邏輯，手動檢查操作是什麼並調用 exchange()