Mixing
angular routing - navigate to same component with additional params without destroying the component
I have a routing setting like this
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
{
path: 'list/:itemId/:subNavItemId',
component: ListItemCmp,
}
]
}
I'm selecting an Item from the ListCmp and get navigated to for example 'list/123'
In the ListCmp Constructor/OnInit I'm fetching some data with the :itemId and it returns a list of SubNavItems, from which the id of the first SubNavItem should be added as params (for routerLinkActive to highlight and other fetching purposes).
constructor(route:ActivatedRoute, http:HttpClient, router:Router){
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
})
}
This will cause the destruction of the current ListItemCmp and instantiate a new ListItemCmp. How can I prevent that? I've tried the location.go() method but that won't trigger the routerLinkActive
angular angular-routing angular-router angular-routerlink
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
add a comment |
I have a routing setting like this
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
{
path: 'list/:itemId/:subNavItemId',
component: ListItemCmp,
}
]
}
I'm selecting an Item from the ListCmp and get navigated to for example 'list/123'
In the ListCmp Constructor/OnInit I'm fetching some data with the :itemId and it returns a list of SubNavItems, from which the id of the first SubNavItem should be added as params (for routerLinkActive to highlight and other fetching purposes).
constructor(route:ActivatedRoute, http:HttpClient, router:Router){
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
})
}
This will cause the destruction of the current ListItemCmp and instantiate a new ListItemCmp. How can I prevent that? I've tried the location.go() method but that won't trigger the routerLinkActive
angular angular-routing angular-router angular-routerlink
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
1
'list/:itemId/:subNavItemId'should be a child of'list/:itemId': because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.
– trichetriche
Nov 21 '18 at 11:13
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07
add a comment |
I have a routing setting like this
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
{
path: 'list/:itemId/:subNavItemId',
component: ListItemCmp,
}
]
}
I'm selecting an Item from the ListCmp and get navigated to for example 'list/123'
In the ListCmp Constructor/OnInit I'm fetching some data with the :itemId and it returns a list of SubNavItems, from which the id of the first SubNavItem should be added as params (for routerLinkActive to highlight and other fetching purposes).
constructor(route:ActivatedRoute, http:HttpClient, router:Router){
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
})
}
This will cause the destruction of the current ListItemCmp and instantiate a new ListItemCmp. How can I prevent that? I've tried the location.go() method but that won't trigger the routerLinkActive
angular angular-routing angular-router angular-routerlink
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
I have a routing setting like this
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
{
path: 'list/:itemId/:subNavItemId',
component: ListItemCmp,
}
]
}
I'm selecting an Item from the ListCmp and get navigated to for example 'list/123'
In the ListCmp Constructor/OnInit I'm fetching some data with the :itemId and it returns a list of SubNavItems, from which the id of the first SubNavItem should be added as params (for routerLinkActive to highlight and other fetching purposes).
constructor(route:ActivatedRoute, http:HttpClient, router:Router){
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
})
}
This will cause the destruction of the current ListItemCmp and instantiate a new ListItemCmp. How can I prevent that? I've tried the location.go() method but that won't trigger the routerLinkActive
angular angular-routing angular-router angular-routerlink
angular angular-routing angular-router angular-routerlink
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
asked Nov 21 '18 at 10:56
Han CheHan Che
2,37263166
2,37263166
1
'list/:itemId/:subNavItemId'should be a child of'list/:itemId': because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.
– trichetriche
Nov 21 '18 at 11:13
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07
add a comment |
1
'list/:itemId/:subNavItemId'should be a child of'list/:itemId': because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.
– trichetriche
Nov 21 '18 at 11:13
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07
1
1
'list/:itemId/:subNavItemId' should be a child of 'list/:itemId' : because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.– trichetriche
Nov 21 '18 at 11:13
'list/:itemId/:subNavItemId' should be a child of 'list/:itemId' : because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.– trichetriche
Nov 21 '18 at 11:13
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07
add a comment |
2 Answers
2
active
oldest
votes
Following my comment, your error was coming from the fact that your routes were siblings instead of parents : by routing away from the first sibling, you were destroying it to create the other sibling.
With parent routes, the parent will stay (because it contains a router outlet and can't disappear), while the child will be appended to the parent, meaning the parent doesn't get destroyed.
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
add a comment |
you can use query params instead of hard routing
constructor(route: ActivatedRoute) {
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
})
this.activatedRoute.queryParamMap.subscribe(query => {
if (query['params']['subNavItemId']) {
// perform some action
}
});
}
In your router you can now remove "list/:itemId/:subNavItemId"
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
// you can remove below route
// {
// path: 'list/:itemId/:subNavItemId',
// component: ListItemCmp,
// }
]
}
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
add a comment |
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%2f53410601%2fangular-routing-navigate-to-same-component-with-additional-params-without-dest%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Following my comment, your error was coming from the fact that your routes were siblings instead of parents : by routing away from the first sibling, you were destroying it to create the other sibling.
With parent routes, the parent will stay (because it contains a router outlet and can't disappear), while the child will be appended to the parent, meaning the parent doesn't get destroyed.
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
add a comment |
Following my comment, your error was coming from the fact that your routes were siblings instead of parents : by routing away from the first sibling, you were destroying it to create the other sibling.
With parent routes, the parent will stay (because it contains a router outlet and can't disappear), while the child will be appended to the parent, meaning the parent doesn't get destroyed.
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
add a comment |
Following my comment, your error was coming from the fact that your routes were siblings instead of parents : by routing away from the first sibling, you were destroying it to create the other sibling.
With parent routes, the parent will stay (because it contains a router outlet and can't disappear), while the child will be appended to the parent, meaning the parent doesn't get destroyed.
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
Following my comment, your error was coming from the fact that your routes were siblings instead of parents : by routing away from the first sibling, you were destroying it to create the other sibling.
With parent routes, the parent will stay (because it contains a router outlet and can't disappear), while the child will be appended to the parent, meaning the parent doesn't get destroyed.
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
answered Nov 21 '18 at 14:10
trichetrichetrichetriche
26.7k42255
26.7k42255
add a comment |
add a comment |
you can use query params instead of hard routing
constructor(route: ActivatedRoute) {
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
})
this.activatedRoute.queryParamMap.subscribe(query => {
if (query['params']['subNavItemId']) {
// perform some action
}
});
}
In your router you can now remove "list/:itemId/:subNavItemId"
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
// you can remove below route
// {
// path: 'list/:itemId/:subNavItemId',
// component: ListItemCmp,
// }
]
}
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
add a comment |
you can use query params instead of hard routing
constructor(route: ActivatedRoute) {
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
})
this.activatedRoute.queryParamMap.subscribe(query => {
if (query['params']['subNavItemId']) {
// perform some action
}
});
}
In your router you can now remove "list/:itemId/:subNavItemId"
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
// you can remove below route
// {
// path: 'list/:itemId/:subNavItemId',
// component: ListItemCmp,
// }
]
}
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
add a comment |
you can use query params instead of hard routing
constructor(route: ActivatedRoute) {
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
})
this.activatedRoute.queryParamMap.subscribe(query => {
if (query['params']['subNavItemId']) {
// perform some action
}
});
}
In your router you can now remove "list/:itemId/:subNavItemId"
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
// you can remove below route
// {
// path: 'list/:itemId/:subNavItemId',
// component: ListItemCmp,
// }
]
}
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
you can use query params instead of hard routing
constructor(route: ActivatedRoute) {
let id = route.params.itemId
http.get(.../id).subscribe(list => {
// add id of first item of list to params
this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
})
this.activatedRoute.queryParamMap.subscribe(query => {
if (query['params']['subNavItemId']) {
// perform some action
}
});
}
In your router you can now remove "list/:itemId/:subNavItemId"
{
path: '',
component: BaseCmp,
children: [
{ path: 'list', component: ListCmp },
{
path: 'list/:itemId',
component: ListItemCmp,
},
// you can remove below route
// {
// path: 'list/:itemId/:subNavItemId',
// component: ListItemCmp,
// }
]
}
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
edited Nov 21 '18 at 11:13
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
answered Nov 21 '18 at 11:10
Thomsheer AhamedThomsheer Ahamed
686
686
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
add a comment |
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
That doesn't answer the question, that provides a workaround for the issue.
– trichetriche
Nov 21 '18 at 11:11
add a comment |
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%2f53410601%2fangular-routing-navigate-to-same-component-with-additional-params-without-dest%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
1
'list/:itemId/:subNavItemId'should be a child of'list/:itemId': because of that, your routing creates two instances of a same class, but has to destroy them to route away to the URL. Make it a child of the first route, then your component should not be destroyed anymore.– trichetriche
Nov 21 '18 at 11:13
thanks, I did just that, if you post a reply I can check it off
– Han Che
Nov 21 '18 at 14:07