Angular2 - подписаться на изменения служебной переменной

Question

У меня есть служба аутентификации, которая делает аутентифицированную переменную равной true или false.

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

Как выполнить функцию, когда this.authenticated изменилось значение? ngOnChanges не подбирает изменения.

Answer 1

Чтобы authenticated в обслуживании и делиться ею между компонентами вы можете использовать BehaviorSubject, это 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 изменило значение?

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

Answer 2

Я думаю, что вы могли бы использовать в Get/Set синтаксис машинописи определить, когда ваша подлинность свойства вашей службы обновляется:

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

При присвоении значения, то «набор аутентификации "вызывается блок. Например, с таким кодом:

this.authenticated = true; 

Смотрите этот вопрос для более подробной информации:

• get and set in TypeScript

Это сказал, что вы могли бы также использовать свойство EventEmitter в службе. Когда аутентифицированное свойство обновляется, соответствующее событие может быть запущено.

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, он работает.