我如何將數據從組件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() {

  }

}

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

Answer 1

相當有趣的問題，基本上您的問題的解決方案是Observable/subscriber ，您需要在登錄組件中的值更改時進行偵聽並將其發送回navbar組件進行顯示。

您可以像這樣使用全局Observable

假設您像這樣在全局文件中創建一個Observable

public loggedInObs: Rx.Subject<any> = new Rx.Subject<any>();
public loggedInVar: boolean = false;

為了使用這個，你必須像這樣導入一些依賴

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

在您的登錄組件中，您告訴angular發生了一些更改，例如用戶登錄成功。 並且可以觀察到，因此angular可以在您設置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
})

如有任何疑問，請通知我。