angular2 +：サービスは、可変成分

Question

に更新されていない私は、コンポーネントのサービス変数を使用しようとしているが、サービスの機能が更新された変数は、ここでコンポーネント

に変更しないことを呼び出しているとき、私のサービスは

import { Injectable } from '@angular/core'; 
import { environment } from 'environments/environment'; 
import { Observable } from 'rxjs/Observable'; 

const API_URL = environment.apiUrls.coreServiceUrl; 

@Injectable() 
export class LoadingBarService { 
    showspinner = {isStart : false}; 
    start() { 
    this.showspinner.isStart = true; 
    console.log(this.showspinner); 
    console.log('start'); 
    } 
    complete() { 
    this.showspinner.isStart = false; 
    console.log('complete'); 
    } 
} 

です私はここに私のコンポーネントでshowspinnerを使用したい私のコンポーネントのコードは

component.ts

import { Component, OnInit, Input } from '@angular/core'; 
import { LoadingBarService } from './../../services/pageloader/spinner'; 

@Component({ 
    selector: 'spinner', 
    templateUrl: './spinner.component.html', 
    styleUrls: ['./spinner.component.css'] 
}) 
export class SpinnerComponent implements OnInit { 
    showspinner; 
    public constructor(private loadingBarService: LoadingBarService) { 

    } 

    ngOnInit(){ 
    this.showspinner = this.loadingBarService.showspinner; 
    } 
} 

です

component.html

<div *ngIf="showspinner.isStart" class="loading-icon"></div>{{showspinner | json}} 

しかし、これshowspinner.isStart変数をリアルタイムに更新されません。

Answer 1

ngOnInit ..の値を設定するだけなので、変数this.showSpinnerは決して変更されません。

解決策の1つは、サービスからの値を直接バインドすることです。実際にはエレガントではありませんが、ほとんどの場合問題ありません。変更検出でこのコンポーネントをスキップすると機能しません。

<div *ngIf="loadingBarService.showspinner" class="loading-icon"></div>{{showspinner | json}} 

第二ソリューションとほぼ同じですが、BehaivourSubjectを使用することになりをお勧めします。このアプローチでは、反応があり、ゾーン内でアクションを実行している場合は、非同期パイプと暗黙のmarkForCheck呼び出しのため、スピナーが常に表示されます。

@Injectable() 
export class LoadingBarService { 
    private showspinner = new BehaviorSubject(false); 
    public isShowingSpinner$; 
    constructor() { 
     this.isShowingSpinner$ = this.showspinner.asObservable(); 
    } 
    start() { 
     this.showspinner.next(true); 
     console.log(this.showspinner); 
     console.log('start'); 
    } 
    complete() { 
     this.showspinner.next(false); 
     console.log('complete'); 
    } 
} 

し、HTMLでは、あなたがmarkForCheckがきれいすぎと呼ばれているされていることを確認して、非同期パイプを使用して、それに加入します。

<div *ngIf="loadingBarService.isShowingSpinner$ | async" class="loading-icon"></div>{{showspinner | json}} 

希望はこのhelspです。