使用角，一旦选定，如何传递ID使用输出，然后调用它在页脚与输入

Question

我要做的是做一个下拉列表，调用https://swapi.co/ API，一旦选择了一个项，它就会在页脚组件中显示信息。我对角很陌生，在过去的8个小时努力学习之后，我有点迷茫了。

body.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav nav-pills nav-fill">
      <li class="nav-item col-md-3">
          <a href="/people" routerLink="/people" routerLinkActive="active">People</a>
      </li>
      <li class="nav-item col-md-3">
          <a href="/planets" routerLink="/planets" routerLinkActive="active">Planets</a>
      </li>
      <li class="nav-item col-md-3">
          <a href="/starships" routerLink="/starships" routerLinkActive="active">Starships</a>
      </li>
    </ul>
    </div>
</nav>

<select>
    <option *ngFor="let people of peoples">
      {{people.name}}
    </option>
  </select>

body.component.ts

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { StarwarsService } from '../starwars.service';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss']
})
export class BodyComponent implements OnInit {

  peoples: unknown[];

  constructor(private starwarsService: StarwarsService) { }

  ngOnInit() {
    this.starwarsService.getPeoples().subscribe(results => {
      console.log(results);
      this.peoples = results.results;
    });
  }
}

footer.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<app-header></app-header>
<hr>
<router-outlet></router-outlet>
<hr>
<app-footer></app-footer>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular-Routing';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BodyComponent } from './body/body.component';
import { FooterComponent } from './footer/footer.component';
import { PlanetsComponent } from './planets/planets.component';
import { StarshipsComponent } from './starships/starships.component';
import { NotFoundComponent } from './not-found/not-found.component';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BodyComponent,
    FooterComponent,
    PlanetsComponent,
    StarshipsComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

starwars.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class StarwarsService {

  constructor(private http: HttpClient) { }

  getPeoples() {
    return this.http.get('https://swapi.co/api/people/  ');
  }
  getPeople(id) {
    return this.http.get(`https://swapi.co/api/people/${id}  `);
  }

  getPlanets() {
    return this.http.get('https://swapi.co/api/planets/  ');
  }
  getPlanet(id) {
    return this.http.get(`https://swapi.co/api/planets/${id}  `);
  }

  getStarships() {
    return this.http.get('https://swapi.co/api/starships/  ');
  }
  getStarship(id) {
    return this.http.get(`https://swapi.co/api/starships/${id}  `);
  }
}

Answer 1

首先，您的footer.component和body.component之间没有父子关系，所以我建议您使用这个主题将数据从body.component获取到footer.component，所以给您

starwars.service.ts

// here we are creating a subject and pass the data from body component and subscribe the data from footer component

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';
import { filter, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class StarwarsService {
  // subject 
  protected _eventsSubject = new Subject<Event>();

  constructor(private http: HttpClient) { }

  broadcast(key: any, value: any) {
    this._eventsSubject.next({ key, value });
  }

  on<T>(key: any): Observable<T> {
    return this._eventsSubject.asObservable()
      .pipe(
        filter(e => e.key === key),
        map(e => e.value)
      );
  }

  getPeoples() {
    return this.http.get('https://swapi.co/api/people/  ');
  }
  getPeople(id) {
    return this.http.get(`https://swapi.co/api/people/${id}  `);
  }

  getPlanets() {
    return this.http.get('https://swapi.co/api/planets/  ');
  }
  getPlanet(id) {
    return this.http.get(`https://swapi.co/api/planets/${id}  `);
  }

  getStarships() {
    return this.http.get('https://swapi.co/api/starships/  ');
  }
  getStarship(id) {
    return this.http.get(`https://swapi.co/api/starships/${id}  `);
  }
}

body.component.ts

// here we are sending data into our subject 

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { StarwarsService } from '../starwars.service';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss']
})
export class BodyComponent implements OnInit {

  peoples: unknown[];
  specificPerson: any;
  constructor(private starwarsService: StarwarsService) { }

  ngOnInit() {
    this.starwarsService.getPeoples().subscribe(results => {
      console.log(results);
      this.peoples = results.results;
  }
// this function will triger when you select the value on checkbox
  onPersonChange() {
  // here we are sending the data and our key name is starwarsData so by using 
    this key we can be able to fetch the data in footer component
      this.starwarsService.broadcast('starwarsData', this.specificPerson);
    });

  }
}

body.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <ul class="nav nav-pills nav-fill">
      <li class="nav-item col-md-3">
          <a href="/people" routerLink="/people" routerLinkActive="active">People</a>
      </li>
      <li class="nav-item col-md-3">
          <a href="/planets" routerLink="/planets" routerLinkActive="active">Planets</a>
      </li>
      <li class="nav-item col-md-3">
          <a href="/starships" routerLink="/starships" routerLinkActive="active">Starships</a>
      </li>
    </ul>
    </div>
</nav>

<select ()>
    <option *ngFor="let people of peoples">
      {{people.name}}
    </option>
  </select>

<select  [(ngModel)]="specificPerson"  class="form-control" (change)="onPersonChange()">
      <option *ngFor="let people of peoples" [ngValue]="people.name">{{people.name}}</option>
</select>

Footer.component.ts

// here we are fetching the data by using our subject 

import { Component, OnInit, Input } from '@angular/core';
import { StarwarsService } from '../starwars.service';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

  personData: any;
  constructor(private starwarsService: StarwarsService) { }

  ngOnInit() {

// "starwarsData" is our key name which have our data 
   this.starwarsService.on('starwarsData').subscribe(response => {
      console.log(response);
      this.personData = response;
   });
  }

}