Angulaire.io / Angulaire 4. Comment puis-je actualiser un composant de la vue lors du déclenchement d'un autre

J'ai un simple Angulaire.io app. (angulaires-cli /4.1.0)

J'ai un NavbarComponent qui rend le nom d'utilisateur.

Lors de l'accès à l'application la première fois que je ne suis pas connecté et mon application redirige vers la LoginComponent. Ma barre de navigation est également rendu mais sans un nom d'utilisateur. Une fois la connexion réussie, je suis redirigé vers mon HomeComponent.

Et là est le problème. Ma NavBar ne pas afficher le nom d'utilisateur. Mais si je fais un refresh/ctrl+r le nom d'utilisateur est rendu.

Quel est le problème?

app.component.html

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

barre de navigation.le composant.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'));
  }
}

de connexion.composante.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);
                });
    }
}

OriginalL'auteur ChrisWorks | 2017-05-03

  1. 6

    Comme mentionné par JusMalcolm, OnInit ne pas exécuter de nouveau.

    Mais vous pouvez utiliser un Subject de dire la NavbarComponent pour récupérer les données depuis local de stockage.

    Dans votre NavBarComponent importation Subject et il déclare:

    import { Subject } from 'rxjs/Subject';

....

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

    Puis abonnez-vous dans votre constructeur:

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

    Et dans votre LoginComponent, l'importation de la NavbarComponent et lorsque vous êtes connecté avec succès, il suffit d'appeler next() sur le Sujet, et NavbarComponent va souscrire.

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

    Vous pouvez également utiliser un Service partagé à dire NavbarComponent pour ré-exécuter la récupération de l'utilisateur. Plus sur les services partagés de la Officiel Docs.

    Merci AJT_82 et @JusMalcolm. Je vais essayer vos suggestions ici, je pense que le service partagé la mention peut être les "meilleures pratiques" de chemin à faire. Cependant, je pense que c'est une honte qu'il n'y a pas plus pratique (lire: facile). Vous devriez être en mesure d'appeler le type de zone de rafraîchissement ou d'une application.module de rafraîchissement qui ressemble à l'itinéraire et la recharge de tous les composants de la route.
    merci man pour suggérer la rxjs !
    mais l'utilisateur disparaît sur reload
    Oui, c'est fait, cette question n'a pas de demander des données persistantes sur l'actualisation de la page, de sorte que c'est pourquoi il n'est pas inclus. Vous devez, par exemple, utiliser le stockage local pour conserver les données lorsque la page est actualisée 🙂
    ouais j'ai fait il

    OriginalL'auteur AJT_82

  2. 0

    Depuis le composant a déjà été initialisé, ngOnInit() ne fonctionne pas après la connexion. Une solution pour votre cas est de s'abonner à un routeur param qui vérifie si l'utilisateur est connecté.

    par exemple.

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

    OriginalL'auteur JusMalcolm

  3. 0

    Si vous pouvez retourner le nom de backend tout l'authentification, vous pouvez injecter le AuthenticationService à la NavbarComponent et de lier le nom de navbar.component.html.

    NavbarComponent:

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

    navbar.component.html:

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

    OriginalL'auteur GKK