与 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); 
   }

}

我的头条课：

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 代码中）

在“接收”标头组件上

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
        }
      );
  }