在angular2中更改对注入服务属性的检测

Question

Angular1在这里尝试学习angular2。我有一个具有状态服务的组件（下面的MyState），它被注入到它自己及其子组件中。我想看关于该服务的状态发生变化，然后更新在顶级组件另一名成员，具体如下：

import { Component, Input } from '@angular/core'; 

class Item { 
    constructor(public name: string) {} 
} 

class MyState { 
    selectedItems: Item[] = []; 
    addItem(item: Item) { 
    this.selectedItems.push(item); 
    } 
} 

// subcomponent 
@Component({ 
    selector: '[item]', 
    template: ` 
    <!-- state changed from subcomponent: --> 
    <button (click)="state.addItem(model)"> 
     select item {{model.name}} 
    </button> 
    ` 
}) 
class ItemComponent { 
    @Input() model: Item; 
    constructor(private state: MyState){} 
} 

// main component 
@Component({ 
    selector: 'items', 
    template: ` 
    <h1> Available Items: </h1> 
    <ul> 
     <li *ngFor="let item of items" item [model]="item"></li> 
    </ul> 
    <h1> Added Items: </h1> 
    <p>{{ addedItemsString }}</p> 
    `, 
    providers: [MyState], 
    directives: [ItemComponent] 
}) 
class ListComponent { 
    @Input() items: Item[]; 
    private addedItemsString: string = ''; 

    constructor(private state: MyState) { 
    // listen for changes to this.state.selectedItems to 
    // call this.updateAddedItemsString 
    } 

    updateAddedItemsString() { 
    this.addItemsString = this.state.selectedItems.map(i => i.name).join(', '); 
    } 
} 

我的问题是：我应该如何实现在ListComponent构造函数中的伪代码？

诚然，addItemsString成员是人为的，并可以肯定是在模板本身来完成，但对于我的问题的缘故假设updateAddedItemsString可以做很多，更新的ListComponent不同的部件更复杂的东西。

在此先感谢！

Answer 1

使用BehaviorSubject<Item[]>在您服务，让您的ListComponent订阅变化可观察的数组：

class MyState { 
    private _selectedItems: Item[] = []; 
    private _selectedItemsSource = new BehaviorSubject<Item[]>(this._selectedItems); 
    selectedItems$ = this._selectedItemsSource.asObservable(); 
    addItem(item: Item) { 
    this._selectedItems.push(item); 
    this._selectedItemsSource.next(this._selectedItems); 
    } 
} 

@Component({ 
    selector: 'items', 
    template: `<h1> Available Items: </h1> 
    <ul> 
     <li *ngFor="let item of items" item [model]="item"></li> 
    </ul> 
    <h1> Added Items: </h1> 
    <div>{{ addedItemsString }}</div>`, 
    providers: [MyState], 
    directives: [ItemComponent] 
}) 
class ListComponent { 
    @Input() items: Item[]; 
    private addedItemsString: string = ''; 
    constructor(private state: MyState) {} 
    ngOnInit() { 
    this.subscription = this.state.selectedItems$.subscribe(
     items => this.addedItemsString = items.map(i => i.name).join(', ')); 
    } 
    ngOnDestroy() { 
    // prevent memory leak when component is destroyed 
    this.subscription.unsubscribe(); 
    } 
} 

Plunker

我发出整个阵列每次next()被称为。这可确保稍后订阅BehaviorSubject的任何其他组件都将获得完整列表。如果你没有这个要求，当调用addItem()时，你可以只发出新的值。