जब कोई उपयोगकर्ता लॉग इन होता है तो मैं एक NavComponent प्रदर्शित करने के लिए एक ईवेंट एमिटर का उपयोग कर रहा हूं। यदि मैं स्क्रीन रीफ्रेश करता हूं तो NavComponent HTML गायब हो जाता है; संभवतः क्योंकि हेडर को दिखाने/छिपाने के लिए मैं जिस मूल्य का उपयोग करता था वह अब ताज़ा करने के बाद नहीं है।

किसी पृष्ठ को ताज़ा करने पर true बने रहने के लिए [hidden]="!loggedIn" जैसी किसी चीज़ को पूरा करने का एक अच्छा तरीका क्या है?

यहाँ कुछ कोड है:

LogInService में शामिल हैं: @Output() userLoggedIn: EventEmitter = new EventEmitter();

मेरा लॉगिन कॉम्पोनेंट यह करता है: this.managerService.userLoggedIn.emit(true);

और फिर मेरे NavComponent में यह है:

@Input()
    loggedIn: boolean;

    constructor(private service: LogInService ) {
        service.userLoggedIn.subscribe(loggedIn => this.loggedIn = loggedIn);
    }

तो LoginComponent LogInService को उत्सर्जित करता है और फिर NavComponent LogInService को सुनता है कि [hidden] सही है या गलत।

0
Justin 12 पद 2017, 23:54

2 जवाब

सबसे बढ़िया उत्तर

मुझे लगता है कि स्थानीय स्टोरेज का उपयोग करने के लिए इसे पूरा करने का सबसे अच्छा तरीका है। आपको पहले से लॉग इन किए गए उपयोगकर्ता के बारे में लॉगिन सेवा में सुनिश्चित करना होगा, उदाहरण के लिए:

private logInUser(user: User) {
    localStorage.setItem("userDetails", JSON.stringify(user));
    //nextValue here for the observers
}

और अपने ngOnInit विधि में आप लोकलस्टोरेज की जांच कर सकते हैं और अगर उपयोगकर्ता पहले से लॉग इन है तो नेक्स्टवैल्यू को ट्रिगर कर सकते हैं।

इतना ही!

2
Embrioka 13 पद 2017, 00:01

आपके LogInService वर्ग में:

export class LogInService {
   isAuthenticated = false;

   identify(): Promise<boolean> {
      // retrieve your authentication HTTP API
      this.isAuthenticated = true;  
   }

   isAuthenticated() {
     return this.isAuthenticated;
   }
}

अपनी LogInService को अपने रूट लेवल में डालें NgModule इसे सिंगलटन बना देगा, आप इसे अपने प्रोजेक्ट में कहीं भी एक्सेस कर सकते हैं।

आपके घटक में:

isAuthenticated() {
    return this.logInService.isAuthenticated;
}

टेम्पलेट में:

[hidden]="!isAuthenticated()"
0
Haifeng Zhang 13 पद 2017, 00:06