How do I re-render a component manually?

Question

I'm a newcomer to Angular2, I'm used to the Angular 1 digest cycle, meaning if I update the scope of a view I can manually trigger a digest by calling $scope.$digest(). However, I'm not sure how to do this in Angular2, esp given that the new framework doesn't have the implicit data binding that the old version had.

Here's my problem. I have a route that loads a component when a url with a parameter is hit:

// Router export const AppRoutes : RouterConfig = [     {     path: 'my/:arg/view',     component: MyComponent       } ] 

Then I have this component:

// Component export class MyComponent {     constructor(private route : ActivatedRoute,       private r : Router) {     let id = parseInt(this.route.params['value'].id);     console.log(id);     // do stuff with id     }      reloadWithNewId(id:number) {         this.r.navigateByUrl('my/' + id + '/view');     } } 

Lets say I navigate to url /my/1/view. It will call the constructor and the number 1 is logged. However, if I call reloadWithNewId with a new id, reloadWithNewIf(2), the constructor is not called again. How do I manually reload the component?

Answer 1

There shouldn't be a need to reload the component. Just update the model and the view updates itself:

export class MyComponent {     constructor(private route : ActivatedRoute,       private r : Router) {}      reloadWithNewId(id:number) {         this.r.navigateByUrl('my/' + id + '/view');     }      ngOnInit() {       this.sub = this.route.params.subscribe(params => {          this.paramsChanged(params['id']);        });     }      paramsChanged(id) {       console.log(id);       // do stuff with id      } }