Angular 8, Как я могу отправить пользовательскую информацию, полученную от http-вызова в службе, с подпиской на другой компонент? - PullRequest
Новая
       13

Angular 8, Как я могу отправить пользовательскую информацию, полученную от http-вызова в службе, с подпиской на другой компонент?

0 голосов
/ 08 октября 2019

Я относительно новичок в Angular8 (2).

Как я могу отправить userInformation в другой компонент, называемый настройками, и отобразить его на странице? и если что-то изменится, обновите автоматически.

Любая помощь очень ценится. 

export interface UserInfoModel {

id: string;
email?: string;
firstName?: string;
lastName?: string;
mobile?: string;
createdAt: string;

}

private userInformation: UserInfoModel;

this.http
  .post<RequestResponse>(`${API_BASE_URL}user/login`, loginData)
  .pipe(catchError(this.errorHandler))
  .subscribe(response => {
    const token = response.content.token;
    const userId = response.content.id;
    const email = response.content.email;

    // added to UserInfo
    this.userInformation = {
      id: response.content.id,
      email: response.content.email,
      firstName: response.content.firstName,
      lastName: response.content.lastName,
      mobile: response.content.lastName,
      createdAt: response.content.createdAt
    };

    this.token = token; // add token to local var
    this.userId = userId;
}

Ответы [ 2 ]

1 голос
/ 08 октября 2019

Вы можете использовать BehaviorSubject.

Создайте службу, затем к вашим услугам;например:

ng g s user, где user - имя вашей службы. 

import { BehaviorSubject } from 'rxjs';

private userInfo = new BehaviorSubject< UserInfoModel>(null);
userInfo$ = this.userInfo.asObservable();

 .post<RequestResponse>(`${API_BASE_URL}user/login`, loginData)
  .pipe(catchError(this.errorHandler))
  .subscribe(response => {
    //your existing code here
    this.setUserInfo(this.userInformation);


    this.token = token; // add token to local var
    this.userId = userId;
}


setUserInfo(userInfo: UserInfoModel): void {
  this.userInfo.next(userInfo);
}

В вашем компоненте

Вы добавите свою службу в компонент посредством внедрения зависимостей. . 

constructor(private userService: UserService){}
userInfo: UserInfoModel;
ngOnInit(){
  this.userService.userInfo$.subcribe(userInfo=>{this.userInfo = userInfo};
}
1 голос
/ 08 октября 2019

Я создал пример, используя запрос http, чтобы продемонстрировать, как вы можете отправить свой ответ дочернему компоненту.

https://stackblitz.com/edit/angular-wgghzt

По сути, дочерний компонент может принимать входящие данные, используяInput() myVar на дочернем компоненте.

Если вы хотите, чтобы дочерний компонент отправлял сообщения обратно на родительский компонент, вы можете использовать Output() myVar2

Вот хороший пример кода, демонстрирующий, какобщение между ребенком и родителем.

https://stackblitz.com/edit/angular-input-example

...