与 Angular 中的不同组件共享来自服务的特定值

Question

我是 Angular 的新人，遇到了问题。我正在尝试在组件之间传递一些数据。我已经尝试了在互联网上找到的不同解决方案，但我没有找到正确的方法。

我通过一个组件中 api 的一项服务获取具有两个值（标题和 ID）的数据（这工作正常）。单击标题时，我想被重定向到另一个组件并接收被单击标题的 ID，以便调用另一个 api 端点。如何调用具体的值id并带入其他组件？

这是我的第一个服务（工作）：

export class HeadlinesService {
   apiUrl = '...'

   httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
   };

   constructor(private _http: HttpClient) { }

   getHeadlines(): Observable<Headline[]> {     
     return this._http.get<Headline[]>(this.apiUrl); 
   }

}

我的标题class：

export class Headline {
   heading: string;
   id: string;
   source: string;
}

我在这里调用服务以显示标题（工作）

export class NewArticleComponent implements OnInit {

    headlines$: Headline[];

    constructor(private headlineService: HeadlinesService, private deleteService: DeleteService, private router: Router) { }

    ngOnInit() {
       return this.headlineService.getHeadlines()         
       .subscribe(headline => this.headlines$ = headline)
    }
}

我需要一个从上面的服务接收 id（但只有 id）并调用另一个 api 端点的服务。

apiURL = '.../{id}'

从这里调用数据应该像上面的工作服务一样工作，所以我唯一的问题是将 id 从一个服务传递到另一个服务。

希望有人能帮助我:)

Answer 1

您可以通过以下方式传递导航数据：

constructor(...
  router: Router,
  ...) {}

goToPage(headerId) {
  this.router.navigate(['/header'], { queryParams: { headerId } });
}

假设您正在以编程方式进行（从您的 component.ts 代码中）

并且在 "receiving" headers 组件上

sub: Subscription;
headerId;

constructor(
  private route: ActivatedRoute,
  private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .pipe(flatMap(params => {
        this.headerId = params['headerId'];
        return this.apiService.getById(this.headerId);
      })).subscribe(
        response => {
          //You should have your header response from API here
        }
      );
  }

与 Angular 中的不同组件共享来自服务的特定值

Share specific value from a Service with different component in Angular

angular-services

angular

angular-httpclient