Angular 2 route with onInit component reinitialization options

Question

I have a problem when my component is reinitialized when I forward new parameters to it. Here are my routes.

const appRoutes: Routes = [
  { path: '', component: MyNewComponentComponent },
  { path: 'tiles', component: DisplayTileData },
  { path: 'tiles/:master/:filters', component: DisplayTileData } 
];

I head to the tiles and make a service call to retrieve some data. Then I have some buttons that return to the same component with values ​​for "master" and "filters". Routing back to the component with the parameters reinitializes the component and retries the service call. I also have text input on the page. When I first go to this component and add text, the route with the parameters also destroys this text.

<a *ngFor="let tile of tiles">{{tile.id}}</a><br/><br/>

<input class="form-control" maxlength="30" minlength="3" name="from" ng-reflect-maxlength="30">
<button (click)="addNumberToFilter(15)"></button>
<button (click)="addNewMasterPath('do')">add new Number to Filter</button>

Is there a way to prevent reinitialization of this route when routing with new parameters.

. .

public variable: any = [3,4];
public master: any = 'eat';

addNewMasterPath(newMasterVariable) {
    this.master = this.master + '-' + newMasterVariable;
    var newMap = this.variable.map(items => { return items}).join('-');
    this.router.navigate(['tiles/', this.master, newMap]);
}

addNumberToFilter(newParameter) {
    this.variable.push(newParameter);
    var newMap = this.variable.map(items => { return items}).join('-');
    this.router.navigate(['tiles/', this.master, newMap]);
}

Answer 1

.

, , , . , .

, :

/ , tiles/:master/:filters, /tiles , , , API, tiles/:master/:filters.

:

@Injectable()
export class MasterFiltersResolver implements Resolve<MasterFilter> {
  constructor(private cs: MasterFiltersService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];
    return this.cs.getData(id).then(data => {
      if (data) {
        return data;
      }
    });
  }
}

:

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles/:master/:filters', component: DisplayTileData, 
    resolve: {
        masterFilters: MasterFilterResolver
    } 
} 

, , .

/ :

.

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles', component: DisplayTileData }

router.navigate('/tiles', {master: '', filter: ''}.

- :

constructor(private route: ActivatedRoute) {}

this.route.params.subscribe(params => {
  // do something
});

this.route.params , .

Answer 2

,

import { ActivatedRoute } from '@angular/router';

constructor(
private route: ActivatedRoute
) {
  this.route.url.subscribe(url =>{
      /* Your function*/
  });
}