Angular router: how to manupulate every route data in runtime / dynamically?
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 '18 at 13:16
ya_dimonya_dimon
1,01021321
add a comment |
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 '18 at 13:16
ya_dimonya_dimon
1,01021321
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 '18 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 '18 at 14:48
add a comment |
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 '18 at 13:16
ya_dimonya_dimon
1,01021321
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 '18 at 13:16
ya_dimonya_dimon
1,01021321
asked Nov 21 '18 at 13:16
ya_dimonya_dimon
1,01021321
asked Nov 21 '18 at 13:16
ya_dimonya_dimon
1,01021321
asked Nov 21 '18 at 13:16
ya_dimonya_dimon
1,01021321
asked Nov 21 '18 at 13:16
ya_dimonya_dimon
1,01021321
1,01021321
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 14:48
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
0
active
oldest
votes
0
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.
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 '18 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 '18 at 14:48