कोणीय 2 - सेवा परिवर्तनीय परिवर्तनों की सदस्यता लें

Question

मेरे पास एक प्रमाणीकरण सेवा है जो प्रमाणित चर को सत्य या गलत के बराबर बनाती है।

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

मुझे लगता है कि आप टाइपप्रति की प्राप्त/सेट वाक्य रचना का लाभ उठाने सकता है कि पता लगाने के लिए जब अपने सेवा के अपने प्रमाणीकृत संपत्ति अद्यतन किया जाता है:

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

कोणीय 2 के जीयूआई 2-रास्ता बाध्यकारी के लिए धन्यवाद, यह काम करता है।