Angular2でドメインモデルの同じインスタンスを共有し、変更を伝播する方法は？

Question

だから私は非常に単純なドメインモデルのシェルを持っている：

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class Shell { 

    public loggedIn: boolean = false; 

    Change(item : boolean) { 
     this.loggedIn = item; 
    } 
} 

私は、このプロパティを保持AppComponentを持っている：

@Component({ 
    selector: 'my-app', 
    providers: [TemplateRef], 
    templateUrl: './angular/app/Index.html', 
    directives: [ROUTER_DIRECTIVES, NgIf], 
    viewProviders: [Shell] 
}) 



export class AppComponent { 

    public Shell: Shell 

    constructor(@Inject(Shell) _shell: any) { 
     this.Shell = _shell; 
    } 
} 

とインデックスビューの短い作品：

<div *ngIf="Shell.loggedIn"> 
    LOGGED IN! 
</div> 

と私は成功した登録のログイン状態を変更したいregisterviewを持っています：

@Component({ 
    templateUrl: './Angular/app/Html/Account/Register.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [AccountService], 
    viewProviders: [Shell] 
}) 

export class RegisterView { 
    registerForm: any; 
    public Shell: Shell 
    model = new RegisterVM(); 
    constructor(private _formBuilder: FormBuilder, 
     private _http: Http, 
     private _accountSerivce: AccountService, 
     @Inject(Shell) _shell: any) { 
     this.Shell = _shell 
    } 

    onSubmit(event: any) { 
     this.Shell.Change(true) 
    } 

私が見たように、私は依存性注入を利用しようとしましたが、毎回シェルが新しいオブジェクトとして返されます。

本当にシェルシングルトンを作成する必要がありますか？または他の方法がありますか？私はangular2にはとても新しいので、いくつかの非常に基本的なことを監督しているかもしれません。

Answer 1

は

@Component({ 
    selector: 'my-app', 
    providers: [TemplateRef], 
    templateUrl: './angular/app/Index.html', 
    directives: [ROUTER_DIRECTIVES, NgIf], 
    // viewProviders: [Shell] <------- 
}) 

それは方法のためです」 Angular2の "階層インジェクタ"機能が動作します。

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 2

実際にシェルをシングルトンにする必要があります。ブートストラップ方式でサービスをプロバイダとして追加する必要があります。

bootstrap(AppComponent, [ Shell ]); 

そして、あなたのすべてのコンポーネントviewProviders属性からそれを削除します：あなたはあなたのアプリケーションをブートストラップするとき、あなたのシェルサービスを追加する必要があり、このために