組件對象在Angular 2/4中更改時是否可以通知對象？

Question

在Angular中，組件可以通過@Input()接收變量或對象。 每當變量更改時，Angular就會通知組件。 很酷...

我正在嘗試構建一個在左側顯示ng2-tree視圖，在右側顯示編輯視圖的應用程序。 當用戶單擊樹中的節點時，該項目的詳細信息顯示在右側，並且用戶可以更改該項目的屬性。 我需要的是將這些更改傳播回樹。

樹中的各個節點是ItemTreeNode ：

export class ItemTreeNode implements TreeModel {
  value: string;
  id: string;
  children: Array<ItemTreeNode>;
  icon: string;
  settings: TreeModelSettings;
  loadChildren;

  constructor(
    private itemService: ItemService,
    private parent_id: string,
    public item: Item
  ){ ... }
}

樹使用.value作為名稱來渲染節點。 這是在構造函數期間通過調用this.item.nodeName() 。 設置后，它不會改變。 問題是，無論何時更改項目，都需要更改。

我正在尋找的是一種在項目更改時通知此對象的方法，以便可以更新value屬性。

作為Angular更改檢測周期的一部分， ItemTreeNode可以“監視”該項目並接收回調（如果發生更改）？

還是有一種更好的方法來實現所需的行為？

Answer 1

這可以在RxJ的幫助下完成。 讓我們通過setter中斷Item的名稱設置，並觸發一個Observable .next() 。

import {BehaviorSubject} from 'rxjs/BehaviorSubject'

class Item {
  private _name: string;
  private nameSource = new BehaviorSubject<string>('');
  name$ = this.nameSource.asObservable();

  set name(name: string) {
    this._name = name;
    this.nameSource.next(name);
  } 

  get name() { return this._name; } 

  getNodeName() { return this._name + ' !!!'; }

  constructor(name: string){
    this._name = name;
  }
}

您會看到，我將原始商品的名稱推this.nameSource.next(name) 。 在我的示例中，我假設Item的名稱和Node的名稱是不同的。 可觀察的$name是公共的，用於外部訂閱。 然后，我需要訂閱Item的名稱更改，並且最好的位置是ItemTreeNode構造函數，該構造函數將Item實例作為參數：

class Node {
  value: string;

  constructor(item: Item) {
    item.name$.subscribe(result => this.value = item.getNodeName());
  }
}

這里的result是Item的新名稱，但是由於它與Item的Node名稱不同，因此我額外調用了.getNodeName() 。 因此，您唯一需要做的就是將Item的實例傳遞給Node的構造函數，然后RxJs為您完成綁定魔術。

this.item = new Item('My Name');
const node = new Node(this.item);

就是這樣，我創建了一個Plunker來演示這種方法。