如何將數據從組件A發送到組件B Angular 2

Question

我想在我的NavbarComponent上顯示用戶名，這些數據來自LoginComponent。

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder,FormGroup,Validators,FormControl } from '@angular/forms'; 
import { AuthService } from '../../services/auth.service'; 
import { Router } from '@angular/router'; 
import { FlashMessagesService } from 'angular2-flash-messages'; 


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


    form : FormGroup; 
    message; 
    messageClass; 

    constructor(
    private formBuilder: FormBuilder, 
    private authService:AuthService, 
    private router: Router, 
    private flashMessagesService:FlashMessagesService 
    ) { 
    this.createForm(); 
    } 


    createForm(){ 
    this.form=this.formBuilder.group({ 
     username:['', Validators.required], 
     password:['', Validators.required] 
    }) 
    } 

    onLoginSubmit(){ 

    const user={ 
     username: this.form.get('username').value, 
     password: this.form.get('password').value 
    } 

    this.authService.login(user).subscribe(data=>{ 
     if(!data.success){ 
     this.messageClass="alert alert-danger"; 
     this.message=data.message; 
     } 
     else{ 
     this.messageClass="alert alert-success"; 
     this.message=data.message; 
     this.authService.storeUserData(data.token,data.user); 
     setTimeout(()=>{ 
      this.router.navigate(['/profile']); 
     },2000); 

     this.flashMessagesService.show('Welcome to bloggy, '+ this.form.get('username').value +' !',{cssClass: 'alert-info'}); 

     } 
    }); 
    } 

} 

navbar.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../../services/auth.service'; 
import { Router } from '@angular/router'; 
import { FlashMessagesService } from 'angular2-flash-messages'; 


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


    usernameNav; 

    constructor(
    private authService:AuthService, 
    private router:Router, 
    private flashMessagesService:FlashMessagesService 
    ) { } 



    onLogoutClick(){ 
    this.authService.logout(); 
    this.flashMessagesService.show('You are logged out',{cssClass: 'alert-info'}); 
    this.router.navigate(['/']); 
    } 


    ngOnInit() { 

    } 

} 

我，如果有太多的代碼抱歉，但基本上我想借此data.user。 onLoginSubmit（）函數中的LoginComponent的用戶名，將它發送到NavbarComponent，在變量中使用它並將其顯示在html上。 我試圖導入NavbarComponent，沒有工作。

Answer 1

很有趣的問題，基本上解決你的問題的方法是Observable/subscriber，你需要 監聽當登錄組件中的值發生變化並將其發送回導航欄組件顯示。

可以使用全局可觀察到這樣的

讓你創建了一個可觀察在全局文件中像這樣

​​

利用這一點，你必須導入這樣

import { Observable } from 'rxjs/Rx'; 
import * as Rx from 'rxjs/Rx'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

一些依賴

比你的登錄組件，你告訴角度，有一些變化發生像用戶登錄成功。 和fire observable，以便角度能夠在整個應用程序中偵聽，您設置subscriber以偵聽用戶 已登錄到應用程序。此代碼如下

this.authService.login(user).subscribe(data=>{ 
    if(!data.success){ 
    this.messageClass="alert alert-danger"; 
    this.message=data.message; 
    } 
    else{ 
    this.messageClass="alert alert-success"; 
    this.message=data.message; 

    localStorage.setItem('user_info', JSON.stringify(data.user)) 
    /*for Global level observable fire here*/ 
    this.global_service.loggedInVar = true;   //i assume global_service here as your Global service where we declared variables 
    this.global_service.loggedInObs.next(this.global_service.loggedInVar); 

    this.authService.storeUserData(data.token,data.user); 
    setTimeout(()=>{ 
     this.router.navigate(['/profile']); 
    },2000); 

    this.flashMessagesService.show('Welcome to bloggy, '+ this.form.get('username').value +' !',{cssClass: 'alert-info'}); 

    } 

現在你可以聽這使用用戶在任何地方像這樣的應用程序在你的導航欄組件

userdata = JSON.parse(localStorage.getItem('user_info')); // in case of normal loading page 
this.userName = userdata.user_name 

this.global_service.loggedInObs.subscribe(res => {  // in case of when without refresh of page 
    console.log('changes here in login'); 
    userdata = JSON.parse(localStorage.getItem('user_info')); 
    this.userName = userdata.user_name 
}) 

如有疑問，讓我知道。