如何使用Baobab更新angular2組件

Baobab看起來像使用Angular 2構建Flux應用程序的有趣方式，但是我還沒有找到任何示例。如何使用Baobab更新angular2組件

我的主要問題是我怎麼「訂閱」的角度成分，以猴麪包樹：

@Component 
({ selector: 'foo' 
    , template: 
    ` <ul> 
     <li *ngFor='#color of (colors | async)'> 
      {{ color }} 
     </li> 
     </ul> 
    ` 
    } 
) 
export default class FooComponent { 
    colorsCursor: any 

    constructor (@Inject (storeToken) private store) { 
    // https://github.com/Yomguithereal/baobab 
    this.colorsCursor = store.select('palette', 'colors') 

    this.colorsCursor.on 
    ('update' 
    ,() => { 
     // What do I put here to update the component ? 
     } 
    ) 
    } 

    get colors() { 
    return this.colorsCursor.get() 
    } 
}

或者我應該通過在輸入部件推入的數據？但我不知道如何連線所有這些......

來源

2016-05-05 gaspard

要使數據流清除/不直接從控制器修改樹，可能需要服務（對於操作）。從控制器調用請求更改並讓控制器監視Baobab狀態樹中的更改。

然後，你有這樣的流程（從http://christianalfoni.github.io/javascript/2015/02/06/plant-a-baobab-tree-in-your-flux-application.html）：

Architecture using Baobab 

      |------------| 
     |-> | State tree | --|   
     | |------------| | 
     |     v 
    |---------|   |------------| 
    | Actions | <------ | Components | 
    |---------|   |------------|

而對角2式的組件層次，我把光標。對（「更新」 .. 。方法在更高的水平組件，並且經由輸入值傳遞至子組件。

  |------------| 
     |-> | State tree | --|   
     | |------------| | 
     |     v 
    |---------|   |----------------| 
    | Actions | <------ | Component(*) | 
    |---------|   |----------------| 
          | ^
         @Input @Output (EventEmitter) 
          v  | 
         |------------------| 
         | Child Components | 
         |------------------|

組分（*）作爲在反應的控制器視圖，是接近頂和監聽用於猴麪包樹廣播的事件狀態樹。

另外，我覺得在孩子組件可以改善的事情使用

changeDetection: ChangeDetectionStrategy.OnPush

，因爲我們要確保只更新爲輸入推動從上面的變化。

我在Codepen上有一個這樣的例子，雖然沒有Actions Service。

http://codepen.io/mikkokam/pen/zqeWmQ?editors=0010

來源

2016-05-29 20:12:27

如何使用Baobab更新angular2組件

回答

相關問題