Angular 2更新服務更新UI

Question

我正在開發一個Angular2應用程序，其中有一個ConfigurationService和一個組件，需要註冊此服務的屬性更改。

import {Injectable} from "angular2/src/core/di/decorators"; 
@Injectable() 
export class ConfigurationService { 
    private config = { 
     showDeveloperOptions: false 
    } 

    constructor() {} 

    get isDeveloper() { 
     return this.config.showDeveloperOptions; 
    } 


    public setDeveloperOptions(developerOptions: boolean) { 
     this.config.showDeveloperOptions = developerOptions; 
     console.warn("Set DeveloperOptions to " + this.config.showDeveloperOptions); 
    } 
} 

我的視圖組件：

@Component({ 
    selector: 'developer', 
    template: `<div [hidden]="config.isDeveloper">Not a Developer</div>`, 
    providers: [ConfigurationService], 
}) 

export class DeveloperComponent { 
    constructor(public config: ConfigurationService) { 
    } 
} 

不幸的是，當我觸發ConfigurationService.setDeveloperOptions(true)從那裏這項服務得到了注入另一個服務，它不更新視圖。

我在做什麼錯？

非常感謝！

Seb

Answer 1

從不深入導入Angular模塊。此外，在導入模塊不再有：

import {Injectable} from "@angular/core"; 

這只是標記爲依賴注入的服務，但在這裏不是問題。

問題是角度如何進行變化檢測。視圖應該只從被更新：

1. 本身
2. 輸入屬性
3. 可觀察到的

這是爲了保證單程足以工序圖。

import {Injectable} from "@angular/core"; 
import {BehaviorSubject} from "rxjs/BehaviorSubject"; 

@Injectable() 
export class ConfigurationService { 
    private config = new BehaviorSubject({ 
     showDeveloperOptions: false 
    }); 

    constructor() {} 

    get isDeveloper() { 
     return this.config.map(config => config.showDeveloperOptions); 
    } 

    public setDeveloperOptions(developerOptions: boolean) { 
     this.config.next({showDeveloperOptions: developerOptions}); 
     console.warn("Set DeveloperOptions to " + developerOptions); 
    } 
} 

然後您使用async管道打開該值。該視圖將自行更新。

@Component({ 
    selector: 'developer', 
    template: `<div [hidden]="(config.isDeveloper | async)">Not a Developer</div>`, 
    providers: [ConfigurationService], 
}) 

export class DeveloperComponent { 
    constructor(public config: ConfigurationService) { 
    } 
}