Angular: how to route -parameters from same component?

Question

Issue: Whenever I click into one link it selects both. But it shows individual links correctly.

I thing when ever I click on link, It didn't refresh the whole route.

My Code: 1. Angular route:

{ path: 'gantt/:id', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' }},
{ path: 'gantt', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' } },

2.Component:

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

export class Gcomponent extens appComponent implements OnInit{

constructor(
    injector: Injector,
    private _http: Http,
    private _workItemsServiceProxy: WorkItemsServiceProxy,
    private params: ActivatedRoute) {

    super(injector);
    var paramId = params.snapshot.params["id"];

    if (paramId) {
        this.initiativeFilter = paramId;
        this.nameFilter = 'strategy.id=' + this.initiativeFilter;

    }
    } 

  ngOnit(){}

}

Just curious, if you change the order of the routes so that `path: 'gantt'` comes before the `gantt/:id` one, does it change anything? — Chrillewoodz, Oct 16 '18 at 14:37

score 1 · Answer 1 · edited Oct 16 '18 at 15:10

1

you should subscribe to this.params.params, so your component will be updated on every route param change

constructor(
    injector: Injector,
    private _http: Http,
    private _workItemsServiceProxy: WorkItemsServiceProxy,
    private params: ActivatedRoute
) {
    super(injector);

    this.params.params.subscribe(() => {
        var paramId = params.snapshot.params["id"];
        if (paramId) {
            this.initiativeFilter = paramId;
            this.nameFilter = 'strategy.id=' + this.initiativeFilter;
        }
    });
}

edited Oct 16 '18 at 15:10

Ferie

1,358
21
36

answered Oct 16 '18 at 14:37

Artyom Amiryan

2,846
1
10
22

Unfortunately!! Its not working. Should I replace the inner code with this? params.onIdChange = (id) => { this.nameFilter = id ? 'strategy.id=' + id : ''; this.getWorkItems();} – S.Rusdana Oct 16 '18 at 15:12
it's should work, you should put in subscribe() code which will update your component, I can help you more if you will show your component code, try to add in subscribe() init methods and property initial value assigning – Artyom Amiryan Oct 16 '18 at 15:15
Definitely! I didn't understand one thing. Every time I click at Long list it only select the individual row. But whenever I click on tytufy.. It selcts both . – S.Rusdana Oct 16 '18 at 15:22
maybe smth., wrong in your template, please can you add it too – Artyom Amiryan Oct 16 '18 at 15:56

score 1 · Answer 2 · answered Oct 16 '18 at 16:26

1

Try to set up your problematic link DOM elements with exact matching option

[routerLinkActiveOptions]="{exact: true}"

Possible related issue:

Why Angular2 routerLinkActive sets active class to multiple links?

answered Oct 16 '18 at 16:26

Xinan

3,002
1
16
18

Angular: how to route -parameters from same component?

2 Answers2