कोणीय।/कोणीय 4. एक और

Question

ट्रिगर करते समय मैं एक घटक दृश्य को रीफ्रेश कैसे करूं मेरे पास एक सरल Angular.io ऐप है। (कोणीय-क्ली/4.1.0)

मेरे पास एक NavbarComponent है जो उपयोगकर्ता नाम प्रस्तुत करता है।

ऐप तक पहुंचने पर पहली बार जब मैं लॉग इन नहीं होता हूं और मेरा ऐप LoginComponent पर रीडायरेक्ट करता है। मेरा नवबार भी प्रस्तुत किया गया है लेकिन उपयोगकर्ता नाम के बिना। सफल लॉगिन के बाद मुझे अपने होमकंपेंट पर रीडायरेक्ट कर दिया गया है।

और यहां समस्या है। मेरा नवबार उपयोगकर्ता नाम नहीं दिखाता है। लेकिन अगर मैं रीफ्रेश/ctrl + r उपयोगकर्ता नाम प्रदान करता हूं।

क्या गलत है?

app.component.html

<nav-bar></nav-bar> 
<router-outlet></router-outlet> 

navbar.compoment.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'nav-bar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent implements OnInit { 

    me; 

    ngOnInit() { 
    this.me = JSON.parse(localStorage.getItem('currentUser')); 
    } 
} 

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

import { AlertService, AuthenticationService } from '../_services/index'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent implements OnInit { 
    model: any = {}; 
    loading = false; 
    returnUrl: string; 

    constructor(
     private route: ActivatedRoute, 
     private router: Router, 
     private authenticationService: AuthenticationService, 
     private alertService: AlertService) { } 

    ngOnInit() { 
     // reset login status 
     this.authenticationService.logout(); 

     // get return url from route parameters or default to '/' 
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; 
    } 

    login() { 
     this.loading = true; 
     this.authenticationService.login(this.model.email, this.model.password) 
      .subscribe(
       data => { 
        this.router.navigate([this.returnUrl]); 
       }, 
       error => { 
        this.alertService.error(error); 
        this.loading = false; 
        this.errorMsg = 'Bad username or password';console.error('An error occurred', error); 
       }); 
    } 
} 

Answer 1

JusMalcolm से उल्लेख किया है, OnInit फिर से नहीं चलता है।

लेकिन स्थानीय संग्रहण से डेटा लाने के लिए NavbarComponent को बताने के लिए आप Subject का उपयोग कर सकते हैं।

अपने NavBarComponent आयात Subject में और यह घोषणा:

import { Subject } from 'rxjs/Subject'; 

.... 

public static updateUserStatus: Subject<boolean> = new Subject(); 

फिर अपने निर्माता में सदस्यता ली है:

constructor(...) { 
    NavbarComponent.updateUserStatus.subscribe(res => { 
    this.me = JSON.parse(localStorage.getItem('currentUser')); 
    }) 
} 

और अपने LoginComponent में, आयात अपने NavbarComponent और जब आप सफलतापूर्वक प्रवेश कर लिया , विषय पर next() पर कॉल करें, और NavbarComponent इसकी सदस्यता लेंगे।

.subscribe(
    data => { 
     NavbarComponent.updateUserStatus.next(true); // here! 
     this.router.navigate([this.returnUrl]); 
    }, 
    // more code here 

इसके अलावा, आप एक साझा सेवा का उपयोग NavbarComponent बताने के लिए उपयोगकर्ता की बहाली फिर से निष्पादित करने के लिए कर सकते हैं। Official Docs से साझा सेवा के बारे में अधिक जानकारी।

Answer 2

के बाद से घटक पहले से ही शुरू कर दिया गया, ngOnInit() लॉग इन करने के बाद नहीं चलता है। यो के लिए एक समाधान आपका मामला राउटर परम की सदस्यता लेना है जो जांचता है कि उपयोगकर्ता लॉग इन है या नहीं।

उदाहरण के लिए।

this.route.queryParams 
     .map(params => params['loggedIn']) 
     .subscribe(loggedIn => { 
      if (loggedIn) { 
       this.me = JSON.parse(localStorage.getItem('currentUser')); 
      } 
     }); 

Answer 3

यदि आप प्रमाणीकरण करते समय बैकएंड से नाम वापस कर सकते हैं, तो आप NavbarComponent पर प्रमाणीकरण सेवा को इंजेक्ट कर सकते हैं और आवश्यक नाम nbarbar.component.html में बाध्य कर सकते हैं।

NavbarComponent:

export class NavbarComponent { 
    ... 
    constructor(private authservice: AuthenticationService) {} 
    ... 
} 

navbar.component।एचटीएमएल:

<span>Welcome {{authservice.name}}!</span>