使用角度，一旦做出选择，您将如何使用输出传递 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.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;

    });

  }

}

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

}

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 componentimport { 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({&nbsp; providedIn: 'root'})export class StarwarsService {&nbsp; // subject&nbsp;&nbsp; protected _eventsSubject = new Subject<Event>();&nbsp; constructor(private http: HttpClient) { }&nbsp; broadcast(key: any, value: any) {&nbsp; &nbsp; this._eventsSubject.next({ key, value });&nbsp; }&nbsp; on<T>(key: any): Observable<T> {&nbsp; &nbsp; return this._eventsSubject.asObservable()&nbsp; &nbsp; &nbsp; .pipe(&nbsp; &nbsp; &nbsp; &nbsp; filter(e => e.key === key),&nbsp; &nbsp; &nbsp; &nbsp; map(e => e.value)&nbsp; &nbsp; &nbsp; );&nbsp; }&nbsp; getPeoples() {&nbsp; &nbsp; return this.http.get('https://swapi.co/api/people/&nbsp; ');&nbsp; }&nbsp; getPeople(id) {&nbsp; &nbsp; return this.http.get(`https://swapi.co/api/people/${id}&nbsp; `);&nbsp; }&nbsp; getPlanets() {&nbsp; &nbsp; return this.http.get('https://swapi.co/api/planets/&nbsp; ');&nbsp; }&nbsp; getPlanet(id) {&nbsp; &nbsp; return this.http.get(`https://swapi.co/api/planets/${id}&nbsp; `);&nbsp; }&nbsp; getStarships() {&nbsp; &nbsp; return this.http.get('https://swapi.co/api/starships/&nbsp; ');&nbsp; }&nbsp; getStarship(id) {&nbsp; &nbsp; return this.http.get(`https://swapi.co/api/starships/${id}&nbsp; `);&nbsp; }}body.component.ts// here we are sending data into our subject&nbsp;import { Component, Output, EventEmitter, OnInit } from '@angular/core';import { StarwarsService } from '../starwars.service';@Component({&nbsp; selector: 'app-body',&nbsp; templateUrl: './body.component.html',&nbsp; styleUrls: ['./body.component.scss']})export class BodyComponent implements OnInit {&nbsp; peoples: unknown[];&nbsp; specificPerson: any;&nbsp; constructor(private starwarsService: StarwarsService) { }&nbsp; ngOnInit() {&nbsp; &nbsp; this.starwarsService.getPeoples().subscribe(results => {&nbsp; &nbsp; &nbsp; console.log(results);&nbsp; &nbsp; &nbsp; this.peoples = results.results;&nbsp; }// this function will triger when you select the value on checkbox&nbsp; onPersonChange() {&nbsp; // here we are sending the data and our key name is starwarsData so by using&nbsp;&nbsp; &nbsp; this key we can be able to fetch the data in footer component&nbsp; &nbsp; &nbsp; this.starwarsService.broadcast('starwarsData', this.specificPerson);&nbsp; &nbsp; });&nbsp; }}body.component.html<nav class="navbar navbar-default">&nbsp; <div class="container-fluid">&nbsp; <ul class="nav nav-pills nav-fill">&nbsp; &nbsp; &nbsp; <li class="nav-item col-md-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/people" routerLink="/people" routerLinkActive="active">People</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item col-md-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/planets" routerLink="/planets" routerLinkActive="active">Planets</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item col-md-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="/starships" routerLink="/starships" routerLinkActive="active">Starships</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></nav><select ()>&nbsp; &nbsp; <option *ngFor="let people of peoples">&nbsp; &nbsp; &nbsp; {{people.name}}&nbsp; &nbsp; </option>&nbsp; </select><select&nbsp; [(ngModel)]="specificPerson"&nbsp; class="form-control" (change)="onPersonChange()">&nbsp; &nbsp; &nbsp; <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&nbsp;import { Component, OnInit, Input } from '@angular/core';import { StarwarsService } from '../starwars.service';@Component({&nbsp; selector: 'app-footer',&nbsp; templateUrl: './footer.component.html',&nbsp; styleUrls: ['./footer.component.scss']})export class FooterComponent implements OnInit {&nbsp; personData: any;&nbsp; constructor(private starwarsService: StarwarsService) { }&nbsp; ngOnInit() {// "starwarsData" is our key name which have our data&nbsp;&nbsp; &nbsp;this.starwarsService.on('starwarsData').subscribe(response => {&nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; this.personData = response;&nbsp; &nbsp;});&nbsp; }}