Initiate First Step:
Envision an entity named RouteObservables residing somewhere within the project that I aim to utilize (import) across multiple components:
export const RouteObservables = {
state$: 'this.route.paramMap.pipe(map(() => window.history.state))',
url$: 'this.route.url',
params$: 'this.route.params',
queryParams$: 'this.route.queryParams',
fragment$: 'this.route.fragment',
data$: ' this.route.data'
};
Proceed to Second Step:
To achieve the following scenario (using the above RouteObservables object):
const state$ = this.route.paramMap.pipe(map(() => window.history.state));
const url$ = this.route.url;
const params$ = this.route.params;
const queryParams$ = this.route.queryParams;
const fragment$ = this.route.fragment;
const data$ = this.route.data;
Advancing to Third Step
Employing the same collection RouteObservables to automatically commence a forkJoin:
forkJoin([...Object.keys(RouteObservables)]).subscribe(
(routeData: any) => {
this.routeData = routeData;
}
);
Reason for Utilizing the RouteObservables object:
I require the organized sequence to access accurate data (e.g., routeData[0] being my potentially transferred state from the preceding route). This object prevents me from overlooking subscriptions to unsubscribe at the end (ngOnDestroy) as well.
Questions Arising:
What is the most effective method to declare Observables in a sequence (of interest) in an object (or collection) to perform operations dynamically?
If there is no established (modern) method, how can I smoothly progress from the first step to the second step?
Can I bypass the second step entirely and reach the third step more elegantly?
Edit1:
Note: forkJoin does not operate with route (ActivatedRoute) observables in this manner, as route observables do not complete. The following approach works, but my inquiries persist:
// snippet!
// routeData is a public property
ngOnInit() {
this.getAllRouteData();
}
getAllRouteData() {
const state$ = this.route.paramMap.pipe(map(() => window.history.state));
const url$ = this.route.url;
const params$ = this.route.params;
const queryParams$ = this.route.queryParams;
const fragment$ = this.route.fragment;
const data$ = this.route.data;
forkJoin(
state$.pipe(first()),
url$.pipe(first()),
params$.pipe(first()),
queryParams$.pipe(first()),
fragment$.pipe(first()),
data$.pipe(first())
).subscribe(
(routeData: any) => {
this.routeData = routeData;
this.start();
},
(error: any) => {
console.log('Error: ', error);
}
);
}
Edit2: Current Approach (routeObservables lacks reusability in other components)
getAllRouteData() {
const routeObservables = [
this.route.paramMap.pipe(map(() => window.history.state)),
this.route.url,
this.route.params,
this.route.queryParams,
this.route.fragment,
this.route.data
];
forkJoin(routeObservables.map(r => r.pipe(first()))).subscribe(
(routeData: any) => {
this.routeData = routeData;
}
);
}
Reason for Inquiry:
My key challenge lies in maintaining "single responsibility"; I strive to evade duplication of code (e.g., routeObservables above in each component requiring route-related data).