Angular2 - Abonnement für Änderungen der Dienstvariablen

Question

Ich habe einen Authentifizierungsdienst, der die authentifizierte Variable gleich wahr oder falsch macht.

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

Wie führe ich eine Funktion, wenn this.authenticated Wert geändert hat? ngOnChanges nimmt die Änderung nicht auf.

Answer 1

authenticated in Betrieb zu halten und zwischen den Komponenten teilen Sie BehaviorSubject verwenden können, ist es value Authentifizierung an verschiedenen Orten zu überprüfen, und es ist subscribe() Verfahren auf Veränderungen zu reagieren ...

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!") 
    } 
} 

Wie führe ich eine Funktion aus, wenn this.authenticated Wert geändert hat?

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

Answer 2

Ich denke, dass Sie die get/set-Syntax von Typoskript nutzen könnte zu erkennen, wenn Ihre authentifizierten Eigenschaft Ihres Service aktualisiert:

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

Wenn ein Wert zuweisen, stellen Sie den“authentifiziert "Block wird aufgerufen. Zum Beispiel mit einem solchen Code:

this.authenticated = true; 

Sehen Sie diese Frage für weitere Informationen:

• get and set in TypeScript

Das heißt Sie auch eine EventEmitter Eigenschaft in den Dienst nutzen können. Wenn die authentifizierte Eigenschaft aktualisiert wird, kann das entsprechende Ereignis ausgelöst werden.

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); 
    }); 
    } 
} 

Siehe diesen Link für weitere Informationen:

• Delegation: EventEmitter or Observable in Angular2

Answer 3

Es hängt davon ab, wer das Ereignis behandeln muss. Wenn es die übergeordnete Komponente ist, können Sie die Ausgabe Ereignisbindungen nutzen:

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

Und in Ihrer Stammkomponente:

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

Answer 4

benutzen ich ein {{ showValue() }} in der Komponentenvorlage und in der .ts-Datei Ich rief die Variable des Service

Dank Angular2 GUI-2-Wege-Bindung funktioniert es.