ブールデータの更新値を取得

Question

私はアングル2を使用しています。私はサービスを作ったので、私は2つのコンポーネントでサービスオブジェクトを作ったような簡単なタスクを実行したいと思います。ここでcomponent1はbool値をtrueに変更します。これはcomponent2の場合と同じ値を使用します。その逆も同じです。

私のサービスは次のとおりです。

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


@Injectable() 
export class JwtService { 

    appStatus:boolean=false; 


    setStatus(value){ 
    debugger; 

    this.appStatus = value; 

    } 
    getStatus(){ 


    return this.appStatus; 
    } 



} 

マイ部品1時：

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

import { JwtService} from '../shared/services/jwt.service'; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [JwtService ] 
}) 
export class AppComponent { 





appStatus: boolean = false; 
constructor(private jwtService:JwtService) { } 


public Func() :any{ 


     this.jwtService.setStatus(false); 


    } 

} 

マイコンポーネント2時：

import { Component, OnInit } from '@angular/core'; 
import { JwtService} from '../services/jwt.service' 
@Component({ 
    selector: 'layout-header', 
    templateUrl: './header.component.html', 
    providers: [JwtService] 
}) 

export class HeaderComponent implements OnInit { 
    appStatus: boolean ; 
    constructor( private jwtservice:JwtService 

) { 
this.appStatus=jwtservice.getStatus(); 

    } 

setout() 
{ 



    this.jwtservice.setStatus(true); 


} 



} 

ちょうどサービスで発表appstatusの変更された値を取得したいです。

Answer 1

レベルcomponentにserviceを入力する代わりに、moduleレベルで入力してください。このようにしてserviceはシングルトンになり、値を1つに変更するとcomponentは別のcomponentに反映されます。

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    ], 

    providers: [JwtService], 

    exports: [], 
    bootstrap: [AppComponent] 
}) 

Answer 2

behaviourSubjectを使用できます。参考資料はhereです。

あなたのサービスでappStatusをbehaviourSubjectとする必要があります。次に、コンポーネント2からその値をサブスクライブします。これで、component1でステータスを設定すると、component2は変更された値を検出し、component2のサブスクリプション内の関数がトリガーされます。

Answer 3

RxJSにはあまり慣れていないようです。 サブスクライブできるappStatusをSubjectに変換できます。基本的には、値が変更されるたびに呼び出されるSubjectにコールバックを渡します。 Subject.next(value)を使用して新しい値を設定します。

は注意：コンポーネントが破棄されますときは、が対象から解除しなければなりません。これにより、メモリリークや未定義の動作を防止します。

サービス：

@Injectable() 
export class JwtService { 
    appStatus = new BehaviorSubject<boolean>(); 
} 

両方のコンポーネント：

export class HeaderComponent implements OnInit, OnDestroy { 
    private _sub: Subscription; 
    private _currentStatus: boolean = false; 
    constructor(private service:JwtService) {} 
    ngOnInit() { 
    // We make subscription here. Behavior subject means that you will receive latest value on subscription and every next value when it is changed. 
    this._sub = this.service.appStatus.subscribe((status) => this._currentStatus = status); 
    } 
    ngOnDestroy() { 
    // IMPORTANT: UNSUBSCRIBE WHEN COMPONENT IS DESTROYED 
    this._sub.unsubscribe(); 
    } 
    setStatus(status: boolean) { 
    this.service.appStatus.next(status); 
    } 
}