Linking from between parents (Angular 7)

Question

I'm trying to link from one parent to another.

For example, from the below I want to link from one "Dashboard" to another "Dashboard"

When I link from "Home" to a Dashboard, all of the links work. They look like this:

<a [routerLink]="['/dashboard', dashboard.Id]">

However, when I'm in a dashboard and to link to another dashboard, the URL changes, but the dashboard stays the same.

<a [routerLink]="['/dashboard', nextdashboard.Id]">

If I refresh the page with the "next dashboard" URL, the "next dashboard" loads.

What am I doing wrong?

const appRoutes: Routes = [
    {
      path: '',
      component: Home
    },
    {
      path: 'dashboard/:id',
      component: Dashboard,
      children: [
        {
          path: 'Stores', component: StoresComponent
        },
        {
          path: 'Websites', component: WebsitesComponent
        }
      ]
    }
]

Edit: In my Dashboard Component, I'm subscribing to the params. I'm also making a call to a service to get the new order. However, this only works when initially routed from Home, not from Dashboard to Dashboard.

When I console.log the ID, I don't see an update.

this.route.paramMap.subscribe(params => {this.Id = params.get('id')}); 
this.orderjson = this.dashboardService.getOrders().filter((obj) => obj.Id=== this.Id);

You're basically in the same component so Angular doesn't run it again. What you can do is subscribe to the router params and when they change, you'll make a call to load the new dashboard. — Dzhavat Ushev, Jan 29 '19 at 21:06
(potential duplicate, actually) You may also be able to use the second answer here: https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router — HammerN'Songs, Jan 29 '19 at 21:07
@HammerN'Songs inefficient, to say the less. Why would you want to destroy and re instantiate the component when you can simply _push_ a new state into it? — Jota.Toledo, Jan 29 '19 at 21:11
@Jota.Toledo It depends on what needs to get updated. It will at least force the guards to re-run, which may be a requirement. Aside from that, if the page doesn't require much data/load time, just reloading the thing is certain to give you a clean result, and so make development simpler, which may be more important than a small difference in load time. Now if you've got a bunch of data you don't want to have to reload, then absolutely, your recommendation would be necessary. — HammerN'Songs, Jan 29 '19 at 21:16
@Dzhavat-Ushev. I just added what I'm doing for subscribing. Am I doing that wrong though? — user749798, Jan 29 '19 at 21:35

DeborahK · Accepted Answer · 2019-01-29T21:41:51.487

I have a similar situation where I may want to route from /product/5 to /product/42.

I use code like this in the component:

  ngOnInit(): void {
    // Read the product Id from the route parameter
    this.sub = this.route.paramMap.subscribe(
      params => {
        const id = +params.get('id');
        this.getProduct(id);
      }
    );
}

This code watches the route parameter for any change. When a parameter does change, the params.get gets the parameter from the route and then uses it to get the data for that route.

Since the data is bound in the template, the new data just appears.

Your code would need to look something like this:

this.route.paramMap.subscribe(
    params => {
       this.Id = params.get('id');
       this.orderjson = this.dashboardService.getOrders().filter((obj) => obj.Id=== this.Id);
});

When the id is changed, the only code that is re-executed is the code within the subscribe. So your this.dashboardService is not being executed when the id changes. It needs to reside within the subscribe.

Thank you. I subscribed to the params as well. The link changes in the browser, but for some reason, the new content does not load unless I refresh the page. — user749798, Jan 29 '19 at 21:30
That's because only the code *within* the `subscribe` is re-executed when the id changes. — DeborahK, Jan 29 '19 at 21:40

Linking from between parents (Angular 7)

1 Answers1