In my angular app there can be 2 type of layout(e.g. List and Detail). I have to get the layoutConfig based on activated route. For this I'm using a route resolver. My plan is ResolveFn will return a signal not an observable. My LayoutService has an additional requirement, if its a List, it will get list data from layoutConfig's serviceUrl. Below is my existing code which pass url as parameter and return an observable:
export const LayoutResolver: ResolveFn<LayoutConfig> = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
) => {
const _layoutService = inject(LayoutService);
_layoutService.setCurrentActivatedRoute(state.url);
return _layoutService.layoutConfig$;
};
export class LayoutService {
#httpClient = inject(ApiHttpService);
readonly #url_layout: string = 'listConfig';
constructor() {
effect(() => {
console.log('currentActivatedRoute', this.CurrentActivatedRouteSig());
});
}
CurrentActivatedRouteSig = signal<string | undefined>(undefined);
setCurrentActivatedRoute(url: string) {
this.CurrentActivatedRouteSig.set(url);
}
currentActivatedRoute$ = toObservable(this.CurrentActivatedRouteSig);
layoutConfig$ = this.currentActivatedRoute$
.pipe(
filter(Boolean),
switchMap(x => this.#httpClient.GETT<LayoutConfig>(`${this.#url_layout}`)
.pipe(
map(x => x.data)
))
);
LayoutConfigSig = toSignal(this.layoutConfig$, { initialValue: undefined });
private gridData$ = toObservable(this.LayoutConfigSig)
.pipe(
tap(x => console.log('gridData$ =>', x)),
filter(Boolean),
switchMap(x => this.#httpClient.GETT<any>(x.serviceUrl)
.pipe(
tap(x => console.log('serviceUrl$ =>', x.data)),
map(x => x.data)
))
)
GridDataSig = toSignal(this.gridData$, { initialValue: [] });
}
I'm expecting LayoutConfigSig and GridDataSig(if List) in my component as Signal. Also, I'm unsure whether CurrentActivatedRoute in my service class should be signal or a Subject?