将变量传递给组件AngularJS

Question

我目前正在开展一个学校项目，几乎让我的计划充分运作。问题是我似乎无法弄清楚如何将收集的用户数据从一个组件传递到下一个组件以在配置文件页面中显示它。我已经尝试了一些@Input（）这样的东西，但感觉好像我最好在这里问一下并实际学习一些东西而不是正确的猜测。

login( username, password ) {
    //returns succes/error
    //return data
    console.log(username, password)
    const url = `https://svsdb.woodl.nl:5555/api/public/auth/login`;
    const data = {
      email: username,
      password: password,
    }
    console.log(data)
    this.httpClient.post(url, data).subscribe(
      (res:any)=>{
        console.log(res)
        console.log(res.message)
        this.token = res.data.token.value
        this.readUser(res.data.user._id)
        this.key = res.message
      },
      (error)=>console.log(error),
      ()=>console.log(),
    )
  }

  readUser(userId) {
    const url = `https://svsdb.woodl.nl:5555/api/user/read/${userId}`;
    const options = {
      headers: {
        authorization: this.token,
      }
    }
    this.httpClient.get(url, options).subscribe(
      (res:any)=>{
        console.log(res)
        const user_data = res
        console.log(this.key)
        this.redirect(this.key)
      },
      (error)=>{

      },
      ()=>{

      }
    )
  }

这两个函数是LoginComponent的一部分，我想传递给我的ProfileComponent的数据是我在第二个函数中检索的'user_data'。

import { Component, OnInit, Input } from '@angular/core';
import { LoginComponent } from '../login/login.component';

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


  constructor(
    private loginComponent: LoginComponent
  ) { }


  ngOnInit() {
    const user_data = this.loginComponent.user_data;
  }

}

这是我的整个profilecomponent.ts文件，你可以看到我试图检索用户数据，但这不起作用，我对这一切都很新，这是完成我的任务的最后一步所以任何帮助都会非常非常感激。

Answer 1

我喜欢使用rxjs的behaviorubject来做一些事情，例如让不同的组件显示从另一个调用的信息。我建议在服务中获取数据。从一个组件调用该服务中的函数并在另一个组件中显示。以下是从导航栏组件进行搜索，在服务中运行函数以获取数据，并在视图组件中显示数据的示例。

service.ts文件：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
   private _data = new BehaviorSubject (null);

  constructor(private http: HttpClient, private messageService : MessageService) { }

  getData(page:number){
    return this.http.get("https://jsonplaceholder.typicode.com/todos/"+page)
    .subscribe(data => this._data.next(data));
  }


  get data$() {
  return this._data.asObservable();
 }
}

这个组件是我调用函数获取数据的地方，这里是我的navbar组件：

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service';


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

  constructor(private dataService: DataService) { }
  page:number;

  search(page){
    this.dataService.getData(page);
  }

 ngOnInit() {
 }

}

然后数据显示在视图组件中：

import { Component, OnDestroy, OnInit  } from '@angular/core';
import {DataService} from '../data.service';
import * as Rx from "rxjs";


@Component({
 selector: 'app-view',
 templateUrl: './view.component.html',
 styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnDestroy, OnInit  {
sub: Rx.Subscription;
info:{};

constructor(private dataService: DataService) {}

ngOnInit(){
 this.sub = this.dataService.data$.subscribe(data=>this.info=data);
}

ngOnDestroy () {
 this.sub.unsubscribe();
 }
}

这是否可以让您在应用中尝试任何想法？