Angular2 - サービス変数の変更を購読する

Question

認証された変数をtrueまたはfalseにする認証サービスがあります。

checkAuthentication(){ 
    this._authService.getAuthentication() 
    .subscribe(value => this.authenticated = value); 
} 

this.authenticatedが値を変更したときはどのように関数を実行するのですか？ ngOnChangesは変更を取得していません。サービスにauthenticatedを維持し、あなたが BehaviorSubjectを使用することができますコンポーネント間でそれを共有する

Answer 1

、それは別の場所で認証をチェックするvalueだし、それは変化に反応するsubscribe()方法です...どのよう

class AuthService { 
    public authenticated = new BehaviorSubject(null); 
    getAuthentication() { 
    this._http.get('/authenticate') 
     .map(response => response.json()) 
     .map(json => Boolean(json)) // or whatever check you need... 
     .subscribe((value: boolean) => this.authenticated.next(value)) 
    } 
} 

class Component { 
    constuctor(private _authService: AuthService) { 
    // Only check once even if component is 
    // destroyed and constructed again 
    if (this._authService.authenticated.value === null) 
     this._authService.getAuthentication(); 
    } 

    onSubmit(){ 
    if (!this._authService.authenticated.value) 
     throw new Error("You are authenticated!") 
    } 
} 

this.authenticatedの値が変更されたときに関数を実行しますか？

private _authenticated:Boolean = false; 
    get authenticated():Boolean { 
     return this._authenticated ; 
    } 
    set authenticated (authenticated Boolean) { 
    // Plugin some processing here 
     this._ authenticated = authenticated; 
    } 

値を代入すると、「認証済みの設定：私はあなたがあなたのサービスの認証済みのプロパティが更新されたときに検出するために、活字体の取得/設定の構文を活用することができると考えて

this._authService.authenticated 
    .subscribe((value: boolean) => console.log(value)) 

Answer 2

"ブロックが呼び出されます。このようなコードでたとえば：

• get and set in TypeScript

あなたもサービスで持つEventEmitter財産を活用することができると言いました：

this.authenticated = true; 

詳細については、この質問を参照してください。認証されたプロパティが更新されると、対応するイベントが発生する可能性があります。

export class AuthService { 
    authenticatedChange: Subject<boolean> = new Subject(); 

    constructor() {} 

    emit(authenticated) { 
    this.authenticatedChange.next(authenticated); 
    } 

    subscribe(component, callback) { 
    // set 'this' to component when callback is called 
    return this.authenticatedChange.subscribe(data => { 
     callback(component, data); 
    }); 
    } 
} 

は、詳細については、このリンクを参照してください：それは、イベントを処理する必要がある人に依存

• Delegation: EventEmitter or Observable in Angular2

Answer 3

。それは親コンポーネントです場合は、出力イベントバインディングを活用することができます

@Output authenticationChange: EventEmitter<Boolean> = new EventEmitter(); 
checkAuthentication(){ 
    this._authService.getAuthentication() 
    .subscribe(value => 
      if(value != this.authenticated) { 
       this.authenticated = value); 
       this.authenticationChange.emit(value); 
     }); 
} 

そして、あなたの親コンポーネントで：

<directive (authenticationChange)="doSomething()"> 

Answer 4

私はコンポーネントテンプレートで{{ showValue() }}を使用し、.TSファイルで、私はと呼ばれますサービスの変数

showValue() { 
    this.authenticated = this._authService.authenticated; 
    return "dummy" 
} 

Angular2のGUIの2ウェイバインディングのおかげで、