Title: Angular2 CustomReuseStrategy creates new instance of component when routing with parameters
Tags: angular;angular2-routing
Question: I am using Angular2 CustomReuseStrategy class to save a component instance.
When I first route to a component a new instance is created. This works as expected. However, when I route to the same component with new parameters, a new instance of that component is created and the onInit functions execute again. I would like the component to use the same instance, but update the URL parameters. Any ideas? I am stuck on this one.
Here are my routes.
{ path: 'tiles', component: DisplayTileData },
{ path: 'tiles/:master/:filters', canActivate: [AuthGuard], component: DisplayTileData }
Here are the methods that navigate to these routes.
addNewMasterPath(newMasterVariable) {
this.master = this.master + '-' + newMasterVariable;
var newMap = this.variable.map(items =&gt; { return items}).join('-');
this.router.navigate(['tiles', this.master, newMap]);
onSelectAddNewParameter(newParameter) {
this.variable.push(newParameter);
var newMap = this.variable.map(items =&gt; { return items}).join('-');
this.router.navigateByUrl('/tiles/this.master/newMap');
Just to be clear the behavior is the same whether I use router.navigate or router.navigateByUrl.
Comment: You should provide your custom reuse strategy code

Comment: Duplicate from http://stackoverflow.com/questions/41686036/angular-2-route-with-parameters-re-initializing-component-oninit ?

Comment: Do not know if it helps, but have you tried to create a urlTree: `var urlTree= this.router.createUrlTree(["tiles",this.master,newMap]); this.router.navigateByUrl(urlTree);`?


Here is another answer: Based on the source code here:
https://github.com/angular/angular/blob/2.4.1/modules/%40angular/router/src/router.ts#L293-L798
I don't think there's a way to navigate that doesn't reload the component.  Would it be possible to not have a more specific route for those parameters, and pass the query information to the component through the @Input?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:01/17/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><angular2-routing>', 'Title': 'Angular2 CustomReuseStrategy creates new instance of component when routing with parameters', 'ViewCount': 998, 'id': 41704749, 'user_AboutMe': '<p>Working as a front-end web developer since 2010. Bachelors degree from Cal State University San Bernardino in Web Programming. Worked at CSUSB as a Web Developer while in school fulltime. Also, worked as a freelance developer to build front-end websites, as well as database driven websites. Currently working for a larger entity fulltime as a front-end web programmer.</p>\n', 'user_AccountId': 2847590.0, 'user_DisplayName': 'David Aguirre', 'user_Reputation': 1331.0, 'user_Views': 114.0, 'user_id': 2445556.0}}