Aurelia/TS Activate 不更新当前视图

Question

What do I want to achieve

I want to update my current view based on an Id. So say that I have side navigation with the following tabs:

1. Customer A
2. Customer B
3. Customer C

What I want is that the user can click on Customer A and that the current customer view gets updated based on the Customer Id.

What is my problem achieving this

I thought the best way to solve this issue was to navigate to the page and provide the Id directly as follows:

router.navigateToRoute("customer", { currentCustomerId });

Then on the Customer page I am receiving the Id in the activate method as following:

  public activate(params) {
    this.currrentCustomerId = params.currentCustomerId;
  }

Actually, this is working the first time you navigate to a customer. But when I am clicking on another Customer page, the view does not get updated because the activate method does not get triggered for a second time. It is only working if I navigate to another page (not customer page) and go back or simply refresh the whole page.

So what can I use to achieve what I want? I reckon that I have to use something else than activate()?

I appreciate it if someone could give me some insight into this issue.

Regards.

Answer 1

This is due to the default activation strategy wherein, if the URL only changes in terms of a parameter value, the component is reused and hooks are not invoked.

To obtain the desired behavior, you can customize the this behavior at the component level or the route level.

At the component level:

import {activationStrategy} from 'aurelia-router';

export class CustomerComponent {
  determineActivationStrategy() {
    return activationStrategy.replace;
  }

  activate(params: {currrentCustomerId: string}) {
    this.currentCustomerId = params.currentCustomerId;
  }
}

At the route level:

import {Router, RouterConfiguration} from 'aurelia-router'; 

export class App {
   configureRouter(config: RouterConfiguration, router: Router) {
     config.map([{
       name: 'customer',
       moduleId: './customer',
       route: 'customer/:currentCustomerId',
       activationStrategy: 'replace'
     }]);

     this.router = router;
   }
}