Anger2を使ってangular2コンポーネントを更新するには

Question

Baobabは、Angular 2を使ってFluxアプリケーションを構築する興味深い方法のようですが、例は見つかりませんでした。

@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() 
    } 
} 

をまたは私はコンポーネントに入力を介してデータをプッシュする必要があります。

私の主な質問は、私はバオバブに角度成分「を購読」どうすればよいのですか？しかし、私はどのようにこのすべてを配線するかわかりません...

Answer 1

コントローラから直接ツリーを変更したり、データフローをクリアするには、サービスを必要とするかもしれません。 コントローラーから変更を要求し、コントローラーにBaobab状態ツリーの変更を監視させます。

Architecture using Baobab 

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

を、角2スタイルのコンポーネント階層のために、私はカーソル.on（ 'update' を置くところ..：

その後、あなたは（http://christianalfoni.github.io/javascript/2015/02/06/plant-a-baobab-tree-in-your-flux-application.htmlから）このような流れを持っていると思います。より高いレベルのコンポーネントにおける方法、及び入力を介して、子コンポーネントまでの値を渡す。

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

ザ成分（*）はトップに近い、反応させて、コントローラビューとして作用し、リスニングバオバブによって放送されたイベント状態ツリー。

はまた、私たちは入力が上から変更をプッシュすると、それが唯一の更新を確認すると、子コンポーネントに

changeDetection: ChangeDetectionStrategy.OnPush 

を使用して物事を改善するかもしれないと思います。

私はこれをCodepenで、アクションサービスはまだありません。

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