Angular2 Component does not reinitialize for parameterized route

Question

I have below test route with parameter T1:

{
    path: 'Test/:T1',
    component: TestComponent
},

When I route to 'Test/2' from 'Test/1' my TestComponent does not reinitialize. Is it an issue with angular router?

I am using "@angular/router": "3.0.0-beta.1"

Community · Accepted Answer · 2017-05-23 12:02:24Z

2

This is currently the only supported behavior. There are plans to make this configurable https://github.com/angular/angular/issues/9811

You can subscribe to parameters change and do the initialization there

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

    }
}

See also How do I re-render a component manually?

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Aug 9, 2016 at 10:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mustafa Over a year ago

Well actually what the thread suggests is opposite of the behavior I intend to have.. But if they can make it configurable then it may work for all scenarios.

Günter Zöchbauer Over a year ago

Depends on how you see it ;-) Currently the default behavior is like with the old routerCanReuse() { return true; }, but what you want seems to be routerCanReuse() { return false; }.

Mustafa Over a year ago

Exactly.. Because I need the constructor to run every time the route is called.

Günter Zöchbauer Over a year ago

Just move the code out of the constructor and call it from route.params.subscribe(...)

Shawn Over a year ago

the default behavior is more efficient because you don't need to re-create the whole component every time. You have the control to reset just whatever that's needed.

|

Jason · Accepted Answer · 2017-04-11 17:06:26Z

1

After about 2 hours of searching the web for an answer to this router issue, my Solution was to forego the router and just let my component do its thing.

window.location.href = '/my/' + new_id_param + '/view';

This could also work for you if you have no guards that would prevent it from being loaded by visiting the url with the right params.

Not the "best practice way" but it works for me.

answered Apr 11, 2017 at 17:06

Jason

3692 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular2 Component does not reinitialize for parameterized route

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related