Angular router: how to manupulate every route data in runtime / dynamically?
up vote
0
down vote
favorite
The problem:
external breadcrumb implementation forces to use such construct for routes:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'someTitle' //<-- breadcrumb requirement
},
}
current project has something like:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
options: {title: 'some.title'} //<-- current project, will be translated.
},
}
the data from optionswill be translated then.
since the breadcrumb cannot translate, and needs another data structure, it would be nice, to set the data.title = translate(data.options.title) dynamically on every route call (full routes tree, since breadcrumb traverse it)
the endresult, should be then:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'translatedSomeTitle' //<--should be dynamically added
options: {title: 'some.title'}
},
}
How to write such interceptor?
Is there a better way to solve the problem?
One solution could be a resolver ... data: {title: TitleResolver, ... , but i dont want to write resolver on every route definition, and probably later remove, if breadcrumb will be improved.
angular angular-router angular2-observables rxjs6 angular-observable
asked Nov 21 at 13:16
ya_dimon
88521221
add a comment |
up vote
0
down vote
favorite
The problem:
external breadcrumb implementation forces to use such construct for routes:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'someTitle' //<-- breadcrumb requirement
},
}
current project has something like:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
options: {title: 'some.title'} //<-- current project, will be translated.
},
}
the data from optionswill be translated then.
since the breadcrumb cannot translate, and needs another data structure, it would be nice, to set the data.title = translate(data.options.title) dynamically on every route call (full routes tree, since breadcrumb traverse it)
the endresult, should be then:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'translatedSomeTitle' //<--should be dynamically added
options: {title: 'some.title'}
},
}
How to write such interceptor?
Is there a better way to solve the problem?
One solution could be a resolver ... data: {title: TitleResolver, ... , but i dont want to write resolver on every route definition, and probably later remove, if breadcrumb will be improved.
angular angular-router angular2-observables rxjs6 angular-observable
asked Nov 21 at 13:16
ya_dimon
88521221
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
The problem:
external breadcrumb implementation forces to use such construct for routes:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'someTitle' //<-- breadcrumb requirement
},
}
current project has something like:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
options: {title: 'some.title'} //<-- current project, will be translated.
},
}
the data from optionswill be translated then.
since the breadcrumb cannot translate, and needs another data structure, it would be nice, to set the data.title = translate(data.options.title) dynamically on every route call (full routes tree, since breadcrumb traverse it)
the endresult, should be then:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'translatedSomeTitle' //<--should be dynamically added
options: {title: 'some.title'}
},
}
How to write such interceptor?
Is there a better way to solve the problem?
One solution could be a resolver ... data: {title: TitleResolver, ... , but i dont want to write resolver on every route definition, and probably later remove, if breadcrumb will be improved.
angular angular-router angular2-observables rxjs6 angular-observable
asked Nov 21 at 13:16
ya_dimon
88521221
The problem:
external breadcrumb implementation forces to use such construct for routes:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'someTitle' //<-- breadcrumb requirement
},
}
current project has something like:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
options: {title: 'some.title'} //<-- current project, will be translated.
},
}
the data from optionswill be translated then.
since the breadcrumb cannot translate, and needs another data structure, it would be nice, to set the data.title = translate(data.options.title) dynamically on every route call (full routes tree, since breadcrumb traverse it)
the endresult, should be then:
export const routes = {
path: 'xx',
component: xxComponent,
data: {
title: 'translatedSomeTitle' //<--should be dynamically added
options: {title: 'some.title'}
},
}
How to write such interceptor?
Is there a better way to solve the problem?
One solution could be a resolver ... data: {title: TitleResolver, ... , but i dont want to write resolver on every route definition, and probably later remove, if breadcrumb will be improved.
angular angular-router angular2-observables rxjs6 angular-observable
angular angular-router angular2-observables rxjs6 angular-observable
asked Nov 21 at 13:16
ya_dimon
88521221
asked Nov 21 at 13:16
ya_dimon
88521221
asked Nov 21 at 13:16
ya_dimon
88521221
asked Nov 21 at 13:16
ya_dimon
88521221
asked Nov 21 at 13:16
ya_dimon
88521221
88521221
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48
add a comment |
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412899%2fangular-router-how-to-manupulate-every-route-data-in-runtime-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you thought about a superclass/service that does that at component creation ? You could probably even make a decorator for that. Otherwise, feel free to provide a Minimal, Complete, and Verifiable example in a sandbox so that we can play with it.
– trichetriche
Nov 21 at 13:30
@trichetriche do you mean the breadcrumb? It would be good solution if the breadcrumb would be good extendable. But the implementation is hard there. So i should rewrite like full breadcrumb then and lose the support from the dev team of the component. Need rewrite it then on every breadcrumb update :/ But still possible solution for all routes at once, thx.
– ya_dimon
Nov 21 at 14:48