Angular - 如何更新採用輸入參數並第一次正確渲染它的子元件

Question

我的教育經驗如下：<cdk-virtual-scroll-viewportitemSize="5"class="list-scroll"><app-education-item*ngFor="leteducationofloadedEducations"(isSelected)="changeSelected(

P粉658954914 · Answer

當您變更清單中項目的屬性時，loadedEducations 清單不會變更。嘗試重新整理清單（this.loadedEducations = returnedEducations）或在專案中使用狀態管理

P粉022723606 · Answer

問題的根本原因是 @Input() 無法偵測到物件和陣列內部的更改，因為它們都是引用類型。您的education 屬性是一個對象，因此在父元件中進行的直接改變屬性的變更（例如education.school = 'newValue' ）不會觸發子元件的屬性@Input() education 的任何變更

有幾種方法可以解決這個問題，每種方法都有其優點和缺點：

僅傳遞您需要的屬性作為基元

parent.component.ts

education: Education =

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() school: string;
  @Input() degree: string;

  ngOnChanges(changes: SimpleChanges): void {
    // will emit whenever .school or .degree is changed in the parent
  }
}

優點：

使用簡單直觀，「正常」工作
無需額外的樣板即可將變更傳送到子元件

缺點：

需要額外的樣板來接收對子元件的變更。隨著 @Input 數量的增長，變得笨重
您失去了父元件和子元件之間的語意耦合，它們實際上由共用介面（即 Education 介面）綁定
如果屬性也是引用類型，則無法很好地擴展，在這種情況下，這些屬性也需要解壓縮並作為基元傳遞

更改時在父級中重建物件

parent.component.ts

education: Education = 

updateEducation(educationProps: Partial): Education {
  this.education = {
    ...this.education, // Note: You may want to 'deep clone' your object depending on how nested it is
    ...educationProps
  }
}

深度克隆

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() education: Education;

  ngOnChanges(changes: SimpleChanges): void {
    // will emit whenever updateEducation() is called in the parent
  }
}

優點：

保留使用 Education 接口，保持父元件和子元件之間的語意耦合
提倡使用不可變物件通常對物件來說是一個很好的實踐
無需額外的樣板即可接收子元件的變更。

缺點：

需要額外的樣板來發送更改到子元件，也就是在父元件中建立多餘的 updateEducation() 函數

將反應性元素傳遞到您的子元件中，例如 `BehaviorSubject`，並直接訂閱更改

parent.component.ts

educationSubject: BehaviorSubject = new BehaviorSubject(  )

updateEducation(educationProps: Partial): Education {
  const updatedEducation: Education = {
    ...this.education, // Note: You may want to 'deep clone' your object depending on how nested it is
    ...educationProps
  }
  this.educationSubject.next(updatedEducation}
}

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() educationSubject: BehaviorSubject;
}

child.component.html


  {{ education.school }}

優點：

完全控制事件發送/訂閱。這對於您希望觸發的任何其他副作用都是有益的
可以輕鬆擴展以使用許多元件，例如將 educationSubject 放入服務中，並將相同的服務注入到任何需要它的元件中
也提倡使用不可變物件
無需額外的樣板即可接收子元件的變更

缺點：

需要額外的樣板來發送更改到子元件，也就是在父元件中建立多餘的 updateEducation() 函數
使用反應式程式碼的典型限制，例如僅透過串流進行變異、需要避免取消訂閱（如果不使用 | async）等

僅傳遞您需要的屬性作為基元

更改時在父級中重建物件

將反應性元素傳遞到您的子元件中，例如 BehaviorSubject，並直接訂閱更改

將反應性元素傳遞到您的子元件中，例如 `BehaviorSubject`，並直接訂閱更改