Question

我已经开始研究一个小Angular问题，尽管我一直在寻找教程和文档，但仍未找到解决此问题的好方法。我可以很轻松地在Angular之外解决它，但我希望有人可以为此稍微向Angular路线靠拢？

基本上，我从不同的源文件中提取了2个对象：

脚步

{
   id: 1,
   name: "Foo1",
   bars: [ 1, 2, 3 ]
}

酒吧

 {
    id: 1,
    name: "Bar1"
 }

我正在尝试在单独的页面上显示每个列表。但是我需要在Bars页面上列出Foos.html的名称，并在Foos页面上列出链接的Bars.html的名称。

我想有两种可能的解决方案：

在用户界面中查找
服务中的水合

我的Foo类型如下：

{
    id: number;
    name: string;
    bars: Bar[];
}

在非Angular世界中，我相信正确的方法是在Service内（或更可能通过某种控制器）。我一直在尝试在服务级别上实现此功能，但是我正在努力确定如何在2个请求中实现该功能？尤其要考虑到通常情况下，角度HttpClient会自动转换为强类型Foo。

我在这里使用错误的方法吗？我在Angular2 +中看不到Controllers的任何提及，所以我在这里错过了什么吗？

Answer 1

我认为您对这不是“角度”问题的直觉是正确的。这些天来，我想这更多是一个RxJS问题。您需要发出两个请求，并将第二个有效载荷中的数据放入第一个请求中，然后返回合并的有效载荷。

在RxJS的说法中，可以归结为以下内容：

import { HttpClient } ...

const stream_1$ = this.http.get ( 'url_1' );
const stream_2$ = this.http.get ( 'url_2' );

stream_1$.pipe ( 
    switchMap ( x => { 
       // x will be the result of the first stream, 
       // you are literally switching to the second stream
       return stream_2$.pipe ( 
          map ( y => { 
            // y will be the result of the second stream. 
            // So you want to combine x, and y. 
            // Do your hydration here
            return ( { some transformed object using x + y data } );
          } )
    } )
).subscribe ( x => // result will be that combined object )

这就是最近这些事情的处理方式，这是一种非常标准的RxJS模式。您可能想研究不同的运算符，mergeMap等，但是我的基本要旨是上面的内容。

如何补水？

1 个答案: