Angular2: Wert von einer Komponente an eine andere übergeben

Question

Ich habe erfolgreich einen Login-Service für meine Angular 2 App implementiert. Ich möchte jetzt den Benutzernamen des angemeldeten Benutzers aus dieser Komponente einer separaten Komponente zur Verfügung stellen - speziell der Chat-Komponente. So kann ich den Namen des Benutzers anzeigen, wenn er mit einem anderen Benutzer chattet. Ich bin immer noch ein wenig verschwommen, wie Sie Werte wie diese von einer Komponente zur anderen in Angular 2. Hier passieren Sie den Code aus Anmeldungs ​​Komponente ist:

import { AuthenticationService } from './../../data/authentication.service'; 
import { AlertService } from './../../data/alert.service'; 
import { Component, OnInit, Output } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: 'app/views/login/login.component.html', 
    styleUrls: ['app/views/login/login.component.css'] 
}) 

export class LoginComponent implements OnInit { 
    //@Output() username; 
    model: any = {}; 
    loading = false; 

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

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

    login() { 
     this.loading = true; 
     this.authenticationService.login(this.model.username, this.model.password) 
      .subscribe(
       data => { 
        this.router.navigate(['/']); 
        console.log('User logged in as: ' + this.model.username); 
       }, 
       error => { 
        this.alertService.error(error); 
        this.loading = false; 
       }); 
    } 

    reqPasswordReset() { 
     let popup = document.getElementById('myPopup'); 
     popup.classList.toggle('show'); 
    } 
} 

Diese Komponente nutzen einen Authentifizierungsdienst, der aussieht wie folgt:

import { LoginComponent } from './../views/login/login.component'; 
import { ContextMenu } from './../ui/context-menu.component'; 
import { Router, RouterLinkActive } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthenticationService { 

    constructor(private http: Http) {} 

    login(username: string, password: string) { 
     return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => { 
       // login successful if there's a jwt token in the response 
       let user = response.json(); 
       if (user && user.token) { 
        // store user details and jwt token in local storage to keep user logged in between page refreshes 
        localStorage.setItem('currentUser', JSON.stringify(user)); 
       } 
      }); 
    } 

    isAuthenticated() { 
     if (localStorage.getItem('currentUser')) { 
      //console.log('User successfully authenticated...'); 
      return true; 
     } else { 
      // console.log('User is not authenticated...'); 
      return false; 
     } 
    } 

    logout() { 
     // remove user from local storage to log user out 
     localStorage.removeItem('currentUser'); 
     console.log('User successfully logged out'); 
    } 
} 

Ich bin in der Lage, erfolgreich auf der Konsole den Benutzernamen zu loggen, damit ich weiß, dass ich diesen Wert festhalte. Was ich möchte, ist jetzt zu tun, diesen Wert gehen von „this.model.username“ in mein Zimmer Komponente, die derzeit wie folgt aussieht:

import { ChatService } from './../chat/chat.service'; 
import { User } from './../../views/user/user'; 
import { Component, OnInit, Input } from '@angular/core'; 
import { AuthenticationService } from './../../data/authentication.service'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-room', 
    templateUrl: './room.component.html', 
    styleUrls: ['./room.component.less'] 
}) 
export class RoomComponent implements OnInit { 

    otherImg = 'app/img/photo-ph.png'; 
    // otherImg = 'app/img/portrait-place-holder.svg'; 
    model: any; 
    loading = false; 

    others = [ 
    { id: 1, name: 'John Smith', avatar: 'app/img/photo-ph.png' }, 
    { id: 2, name: 'Javier Sanchez', avatar: 'app/img/photo-ph.png' } 
    ]; 

    user; 
    token; 
    name; 
    nickname; 

    constructor(private authenticationService: AuthenticationService, 
       private router: Router, 
       private http: Http, 
       private chatService: ChatService) { } 


    isLoggedIn() { 
    this.loading = true; 
    if (this.authenticationService.isAuthenticated()) { 
     return true; 
    } 
    } 

    gotoChat() { 
    this.chatService.gotoChat(this.user); 
    } 

    ngOnInit() { 
    } 

} 

Die Ansicht für diese Komponente wird Schleife Benutzer (andere) und Anzeigen eines Symbols für jeden "anderen" Benutzer. Hier ist der Code:

<div *ngIf="isLoggedIn()" class="others"> 
    <span *ngFor="let other of others"><i [ngClass]="'material-icons'" (click)="gotoChat()" [routerLink]="['/chat']">person</i></span> 
    <a [routerLink]="['/login']">Logout</a> 
</div> 

Das ultimative Ziel ist es für Menschen, andere zu sehen, die angemeldet sind, und in der Lage einen Chat mit ihnen zu initiieren.

Wo ich feststecke ist in, wie übergeben Sie den Wert (this.model.username), den ich in der Login-Komponente erfassen, bis auf die Zimmer-Komponente.

Answer 1

nutzen @input Tag in angular2 dies wird Ihnen Komponenten Informationen zwischen

unter diesem Link für ref

Schauen Sie helfen

http://www.thoughtdelimited.org/thoughts/post.cfm/learning-angular-2-tour-of-heroes-tutorial-lesson-5

Answer 2

Im Login-Methode Ihrer AuthenticationService Sie speichern Das Benutzerobjekt im lokalen Speicher sollte auch im Authentifizierungsdienst gespeichert werden, damit beim Zugriff auf die Komponente auf das Benutzerobjekt zugegriffen werden kann.

Sie müssen dem AuthenticationService eine weitere Methode namens getUsername hinzufügen, um den Benutzernamen abzurufen.

Es wird wie folgt aussehen:

@Injectable() 
export class AuthenticationService { 
    private username: string; 
    constructor(private http: Http) {} 

    login(username: string, password: string) { 
     return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password })) 
      .map((response: Response) => { 
       // login successful if there's a jwt token in the response 
       let user = response.json(); 
       if (user && user.token) { 
        // store user details and jwt token in local storage to keep user logged in between page refreshes 
        localStorage.setItem('currentUser', JSON.stringify(user)); 

        // store username 
        this.username = user.username; 
       } 
      }); 
    } 

    getUsername(): string { 
     return this.username; 
    }