從不更新父項的子項更新@Input屬性

Question

我想更新子項的 @Input 屬性並使更改對父項生效。

父 TS（文檔詳細信息）：

export class DocumentDetailsComponent implements OnInit {
  view: string = 'editor';
}

父 HTML（文檔詳細信息）：

<document-content [(view)]="view" ></document-content>

子 TS（文檔內容）：

export class DocumentContentComponent implements OnInit, OnChanges {

  @Input() view: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.version) {
      this.view = 'editor';
    } 
  }
}

當子組件內的視圖屬性設置為頂部“編輯器”時，它似乎並未反映父組件內的這些更改。

我知道我可以使用 @Ouput 事件發射器，但我覺得這應該可以正常工作。

Answer 1

當角度引導時，它會構建一個組件樹。

組件具有輸入和輸出屬性，可以在組件裝飾器中定義或使用屬性裝飾器。

數據通過@input properties(Parent to child)流入組件。 數據通過@output （子到父）屬性流出組件。

具有@input屬性的數據沿着樹向下流動。它不會向上流動。

如果您希望數據流向相反的方向，即向上，您需要使用@Output裝飾器和事件發射器。

Answer 2

如果您希望來自@Input的更改影響父級，這意味着您希望您的@Input也是一個@Output ，這稱為two-way binding ，您可以在此處找到相關文檔。

但總而言之，在角度上會發生什么：

<document-content [(view)]="view" ></document-content>

這是語法糖：

<document-content [view]="view" (viewChange)="view=$event" ></document-content>

因此，為了讓您的代碼正常工作，您需要創建 viewChange 輸出並在您的代碼更改視圖屬性時調用 emit()。

@Input() view: string;
@Output() viewChange = new EventEmitter<string>();

ngOnChanges(changes: SimpleChanges) {
  if (changes.version) {
    this.view = 'editor';
    this.viewChange.emit(this.view);
  } 
}