Angular - Create JSON object to store data associated with each route

Question

I want to create a JSON object which holds help text for each route in the Angular 6 app.

let helpRoutes = {
 'wizard/{some_id}/step1': 'This is help content for step 1',
 'wizard/{some_id}/step2': 'This is help content for step 2',
 'user/details/{some_id}/tab1': 'This is help content for user details with activated tab 1'
 'user/details/{some_id}/tab2': 'This is help content for user details with activated tab 2'
}

So if I want to access help for step 1 for any screen_id, I should get it with:

helpRoutes['wizard-fa/123456/step4'];

Above code is obviously incorrect and giving me 'undefined' and that is why I asked this question.

Can we achieve what I wanted to do using JSON's key value pair?

If yes, then how. If no, what are the alternatives?

Thanks.

Answer 1

In your routes, you can add static data

{ path: 'my-route', component: MyComponent, data: {
  help: 'This is help content for component'
}}

And you can use it with an instance of ActivatedRoute

constructor(
  route: ActivatedRoute
) {
  console.log(route.data);
}

Answer 2

Instead of

let helpRoutes = {
 'wizard/{screen_id}/step1': 'This is help content for step 1',
 'wizard/{screen_id}/step2': 'This is help content for step 2'
}

you can write it as

let helpRoutes = {
 'step1': 'This is help content for step 1',
 'step2': 'This is help content for step 2'
}

Extract the last word using / seperator and get the data from json. Like if route is wizard/1234/step1 , get the last word step1 and then help[step1] .

This can be one approach.

Answer 3

yes you can achieve it by assigning the screen id before calling the helproute object.If you want screen_id to be dynamic then you must have to assing the value to the object first.See the example,

   let helpRoutes = {};
    for(let screen_id=0;screen_id<10;screen_id++){
        helpRoutes[`wizard/${screen_id}/step1`] =`This is help content for step ${screen_id}`;
    }

After assigning helproutes value you can then get the value.

helpRoutes['wizard/2/step1']