Question

网络上有许多有关此主题的示例，但没有一个对我有帮助。这是场景：我有2个组件和一个服务。这两个组件不是父母/孩子，而是两个独立的组件。其中一个具有名称列表，另一个在单击其中一个名称时应加载表。这是我的home.html，包括两个部分

<div class="material-docs-app">
  <div class="docs-primary-header">
      <h1>Yep!</h1>
  </div>
    <div fxLayout="row" fxLayout.xs="column" class="component-layout-body">
        <app-heroes-sidenav></app-heroes-sidenav>
        <app-heroes-table #heroesTable fxFlex="1 2 calc(15em + 20px)" style="width: 100%"></app-heroes-table>
    </div>
</div>

英雄sidenav组件：

<div *ngIf="loadingData == true">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<nav *ngIf="loadingData == false">
  <p *ngFor="let item of heroesNames.results let i = index" [attr.data-index]="i">
    <button mat-button (click)="getHero(i)">
        {{item.name}} 
    </button>
  </p>
</nav>

点击getHero()会正确调用。这是sidenav组件ts：

import { Component, OnInit, Input } from '@angular/core';
import {SwCharactersServiceService} from '../sw-characters-service.service';
import {HeroesTableComponent} from '../heroes-table/heroes-table.component';

@Component({
  selector: 'app-heroes-sidenav',
  templateUrl: './heroes-sidenav.component.html',
  styleUrls: ['./heroes-sidenav.component.css']
})
export class HeroesSidenavComponent implements OnInit {
  heroesNames: any;
  heroData:any;
  loadingData = true;
  @Input() heroesTable: HeroesTableComponent;
  constructor(private _swService: SwCharactersServiceService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes() {
    this._swService.getCharacters().then(result => {
      this.loadingData = false;
      this.heroesNames = result;
    });
  }

  getHero(index) {
    this._swService.getHero(index);
  }
}

这是服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import 'rxjs/add/operator/map'

import {Observable} from 'rxjs/Observable';

@Injectable({
  providedIn: 'root'
})
export class SwCharactersServiceService {
  param:any;
  constructor(private http: HttpClient) { }

  getCharacters(): Promise<any[]> {
    return this.http.get<any[]>("https://swapi.co/api/people/")
    .toPromise()
    .then(result => result) 
    .catch(this.handleError);
  }

  getHero(index): Observable<any>{
    console.log(index);
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    return this.http.get("https://swapi.co/api/people/" + index, {
        headers: headers
    }).map(res => res );
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

我可以正确看到console.log(index)，但该请求无效。 Chrome控制台网络标签中没有发起任何请求。这是带有表的组件：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {SwCharactersServiceService} from '../sw-characters-service.service';

@Component({
  selector: 'app-heroes-table',
  templateUrl: './heroes-table.component.html',
  styleUrls: ['./heroes-table.component.css']
})
export class HeroesTableComponent implements OnInit {
  loadingData = true;
  heroData :any;
  subscription: Subscription;

  constructor(private _swService: SwCharactersServiceService) {
    this.subscription = this._swService.getHero(1).subscribe(result => { this.heroData = result; });
    console.log(this.heroData);
  }

  ngOnInit() {

  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }
}

现在有2个问题：

1）如您所见，我写了this._swService.getHero(1)而没有传递动态参数。它是如何工作的？如何传递正确的索引？

2）服务没有启动，我没有任何结果。

还有其他方法吗？

谢谢。

Answer 1

您可以使用BehaviourSubject传递索引值，并在列表被喜欢时发送查询请求在服务中

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 public index: BehaviorSubject<number> = new BehaviorSubject<number>(null);

在sidenav组件中

getHero(index) {
    this._swService.index.next(index);
  }

在英雄表组件中

ngAfterViewInit(){
   this._swService.index.subscribe(index=>{
      if(index){
        this._swService.getHero(index).subscribe(result => { this.heroData = result; });
      }
   })
}

Answer 2

您错过了订阅_swService.getHero()。如果未订阅返回Observable的方法，则将不会调用它。

getHero(index) {
    this._swService.getHero(index).subscribe(
                  (resp) => {
                     // manipulate your response here
                     console.log(resp);  
                  },
                  (err) => {}
          );
}

使用服务Angular在组件之间传递数据

2 个答案: