从组件向服务进行ajax调用，并从另一个组件访问响应

Question

我正在通过创建一个示例来学习Angular2，在该示例中，我想在Component1上单击一个按钮，以对服务进行ajax调用，并且应该使用ajax的响应并将其显示在另一个组件中。

我能够创建Component1并能够通过在Service类中进行ajax调用来获得响应。现在如何在另一个组件中显示结果

这是我的第一个组成部分：

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，它将相应地更新视图。

如果这两个组件都是共享父级的子级，则可以在component1上使用@Ouput装饰器将数据输出到父级，并设置要传递给另一个父级的Input的变量。

结果部分

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

，该函数将更新在结果组件中调用该函数的服务中的profile $变量。