Блог

В настоящее время я работаю над школьным проектом, и моя программа почти полностью функционирует. Проблема в том, что я не могу понять, как передать собранные пользовательские данные из одного компонента в следующий компонент, чтобы отобразить их на странице профиля. Я пробовал некоторые вещи с @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, как вы можете видеть, я пытался получить пользовательские данные, но это не работает, я очень новичок во всем этом, и это последний шаг к завершению моего задания, поэтому любая помощь была бы очень признательна.

Мне нравится использовать rxjs ‘ behaviorsubject для выполнения таких действий, как отображение другим компонентом информации, вызванной из другого. Я рекомендую получать данные в сервисе. Вызовите функцию в этой службе из одного компонента и отобразите в другом. Вот пример выполнения поиска из компонента navbar, запуска функции в службе для получения данных, и данные отображаются в компоненте view.

Файл 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();
 }
}
  

Дает ли это вам какие-либо идеи, которые можно попробовать в вашем приложении?