使用角度，一旦做出选择，您将如何使用输出传递 ID，然后在页脚中使用输入调用它

Question

我要做的是制作一个调用https://swapi.co/ API 的下拉菜单，一旦选择了一个项目，它将在页脚组件中显示信息。我对 Angular 真的很陌生，在花了最后 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.tsimport { 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;    });  }}页脚.component.tsimport { 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.tsimport { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss']})export class AppComponent {  title = 'Angular-Routing';}

Answer 1

首先，与您没有亲子关系，footer.component因此body.component我建议您使用该主题从您那里获取数据body.component，footer.component因此您可以

星球大战服务.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>

页脚.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;

   });

  }

}