我正在尝试使用解析器以便根据路由所具有的给定参数来检索数据。
不幸的是,当我添加另一个数据流时,我的数据依赖于解析器,但实际上并没有解析。
如果我直接返回立即解析的值,则一切正常。 我调试了这种情况,发现我收到了所有部分信息,但最终还是无法真正解决。
这里是一个快速示例。如果需要更多代码来理解问题,请打我。
MyService:
export class MyService {
get(bar) {
return of(new Foo(bar));
}
}
SecondService(该服务从后端检索数据):
export class SecondService {
private readonly _observable: Observable<Bar>;
constructor() {
this._observable = merge(
// Other manipulations
).pipe(
// other manipulations
shareReplay(1)
)
}
observable(): Observable<Bar> {
return this._observable;
}
}
解析器:
export class MyResolver {
constructor(_secondService: SecondService, _myService: MyService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
// Does not work - Simply does not resolve
// return this._secondService
// .observable()
// .pipe(
// switchMap((bar) => this._myService.get(bar)),
// );
// WORKS
return of(new Foobar('sampleData'));
}
}
路由器:
const routes: Routes = [
{
path: 'someroute',
component: SomeComponent,
canActivate: [SomeGuard],
resolve: {
myData: MyResolver,
},
},
];
组件:
export class SomeComponent implements OnInit {
constructor(private readonly _route: ActivatedRoute) {}
ngOnInit() {
this._route.data
.subscribe((data) => {
console.log('received:', data);
this.myData = data;
});
}
}
SomeComponent.html
<pre *ngIf="myData">
Received: {{ myData | json }}
</pre>
答案 0 :(得分:2)
我的问题的答案很简单,与订阅已解析的可观测对象无关,因为我已经在(目标)组件中做到了。
由于某种原因,我不得不使用take(1)
只排放一次我的SecondService
,我想是因为它在幕后使用了shareReplay(1)
(对此并不完全确定-命中我在评论中// //如果您有更多的见解,请对其进行编辑。)
因此,所有代码都保持不变,除了将解析器更改为:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
return this._secondService
.observable()
.pipe(
take(1),
switchMap((bar) => this._myService.get(bar)),
);
}
@eduPeeth:不幸的是,感谢您的回答/建议,这是一个非常小的问题。
答案 1 :(得分:1)
仅当您显式调用Observable.subscribe()
时,obbable才会执行。在您的代码中没有看到您要订阅Observable的地方。
注意:解决的概念与Promise有关,与Observable无关。
尝试:
export class MyResolver {
constructor(_secondService: SecondService, _myService: MyService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
// Does not work - Simply does not resolve
return this._secondService
.observable()
.pipe(
take(1),
switchMap((bar) => this._myService.get(bar)),
}
);
// WORKS
return of(new Foobar('sampleData')).pipe(
take(1),
switchMap((bar) => this._myService.get(bar)),
});
}
}
在需要结果的地方订阅。