Передача переменной в компонент AngularJS - PullRequest
Новая
       20

Передача переменной в компонент AngularJS

0 голосов
/ 25 апреля 2019

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

1 Ответ

0 голосов
/ 25 апреля 2019

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

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

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

...