Question

我目前正在做一个学校项目，并且我的程序几乎可以正常运行。问题是我似乎无法弄清楚如何将收集的用户数据从一个组件传递到下一个组件以在配置文件页面中显示。我已经使用@Input（）进行了一些尝试，但感觉好像我最好在这里提问并实际学习一些东西，而不是一guess而就。

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的behaviorsubject做类似让另一个组件显示从另一个组件调用的信息的事情。我建议在服务中获取数据。从一个组件调用该服务中的函数，然后在另一个组件中显示。这是一个从导航栏组件进行搜索，在服务中运行该函数以获取数据，并在视图组件中显示数据的示例。

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();
 }
}

该组件是我调用函数获取数据的地方，这里是我的导航栏组件：

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();
 }
}

这是否给您任何在应用程序中尝试的想法？

将变量传递给组件AngularJS

1 个答案: