Выполнение Ajax-вызова от компонента к услуге и получение ответа от другого компонента.

Question

Я изучаю Angular2, создавая пример, в котором я хочу, чтобы щелкнул кнопкой мыши по Component1, который выполняет вызов ajax к Сервису, а ответ ajax должен использоваться и отображаться в другом компоненте.

Я могу создать Component1 и получить ответ, сделав вызов ajax в классе Service.Теперь, как я могу отобразить результат в другом компоненте

Это мой первый компонент:

import { Component } from '@angular/core';
import { ProfileService } from '../shared/index';

@Component({
  selector: 'home-page',
  template: `
  <div>
    <button (click)="loadUser()">Load profile</button>
    {{ profile | json }}
  </div>
  `
})
export class ProfileComponent {
  constructor(private profileService: ProfileService) {}
  profile = {};

  loadUser() {
    this.profileService.getUser().subscribe(data => this.profile = data);
  }
}

Это мой класс обслуживания:

import { Injectable } from '@angular/core';
import { HttpClient, Response } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ProfileService {
  constructor (
    private http: HttpClient
  ) {}

  getUser() {
   return this.http.get(`https://conduit.productionready.io/api/profiles/eric`)
    .map(res => res );
  }

}

Это мой второйкомпонент, в котором я хочу увидеть результат:

import { Component } from '@angular/core';

@Component({
  selector: 'result-page',
  template: `
  <div>Result Page :     
    {{ profile | json }}
  </div>
  `
})
export class ResultComponent {
  constructor(private profileService: ProfileService) {}
  profile = {};
  username = "";
  bio = "";
}

По сути, ответ ajax - это содержимое Json, я хочу сохранить весь файл JSON в файле profile.Этот json содержит поля для имени пользователя и биографии, я хочу сохранить их в своих переменных имени пользователя и био моего компонента результата.

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

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

Ответ json:

{
"profile": {
"username": "eric",
"bio": "Cofounder of Thinkster.io, kinda looks like Peeta from the Hunger Games",
"image": "http://i.imgur.com/S66L2XZ.jpg",
"following": false
}
}

Answer 1

Редактировать: если компонент, которому вы пытаетесь передать данные, является дочерним для этого компонента, вы можете использовать декоратор @Input для передачи данных в него.@Input автоматически зарегистрирует изменения и обновит шаблон.Если вам нужно выполнить какие-либо функции обновления при изменении этих входных данных, вы можете использовать ngOnChanges, но если вы просто отображаете изменения, вы можете просто использовать @Input, и он обновит представление соответствующим образом.

Если два компонентаоба являются дочерними для общего родителя, вы можете использовать декоратор @Ouput на component1 для вывода данных в родительский и установить переменную, которая передается на вход другого.

в компоненте результатов

export class ResultComponent implements OnChanges {
  @Input results: any;

  constructor(private profileService: ProfileService) {}

  ngOnChanges(changes: SimpleChanges) {
    if(changes['profile'] && changes['profile'].currentValue){
       // do any update functions here if needed
    }
  }
  profile = {};
  username = "";
  bio = "";
} 

и в шаблоне профиля

<results-page [profile]="profile"></results-page>

в component1, если этот компонент также является дочерним

export class ProfileComponent {

  @Ouput() emitProfile = new EventEmitter<any>()

  constructor(private profileService: ProfileService) {}
  profile = {};

  loadUser() {
    this.profileService.getUser().subscribe(data => this.profile = data);
  }
}

, а затем в родительском элементе вы будете обрабатывать отправку данныхнапример:

handleEmitProfile(profile) { this.profile = profile }

вариант 2 - добавить еще одну функцию в службу.

@Injectable()
export class ProfileService {
  constructor (
    private http: HttpClient
  ) {}

  private profile$ = new Subject();

  getUser() {
    return this.http.get(`https://conduit.productionready.io/api/profiles/eric`)    .map(res => res );
  }

  returnProfile() {
     return this.profile$;
  }

  updateProfileObject(event) {
    this.profile$.next(event);
  }
}

в компоненте результатов добавить это:

this.profileService.returnProfile().subscribe(event => this.profile = event}

и в вашем компоненте профиля

this.profileService.updateProfileObject(this.profile);

, и эта функция обновит переменную профиля $ в сервисе, вызывающем функцию в компоненте результатов.