1

I am developing an application where I have configured router-outlet as below

{ path: 'dashboard/:id', component: DashboardComponent}

So when I click on the first link i.e dashboard/1 the page is updated. When I click on the second link dashboard/2, the page URL is updated but the view is not getting updated. But when I do a refresh it is getting updated.

My Dashboardcomponent.html is as below

<div    #coloneanchor></div>
    </div>

<div class="col-md-6">
<div   #coltwoanchor></div>
 </div>

My Dashboardcomponent.ts

@ViewChild('coloneanchor', { read: ViewContainerRef }) coloneanchor: any;
@ViewChild('coltwoanchor', { read: ViewContainerRef }) coltwoanchor: any;

this.route.params.subscribe(param => {
       this.id = param["id"];
        this.userService.getGadgets(this.id).subscribe(gadgets => {

switch(gadget)

case gadget1:
case gadget2:

Here I am creating two anchor points in my view. Once I get the id, I will pass it to an API to fetch the gadget and data and its column location. I loop through the gadgets and add them to the anchor points.

Sathiamoorthy
  • 8,831
  • 9
  • 65
  • 77
indra257
  • 66
  • 3
  • 24
  • 50
  • How does your DashboardComponent look like? – René Winkler Apr 17 '17 at 16:33
  • It takes the id and makes couple of API calls to load grids and charts. I see that DashboardComponent has to implement Reuse, but I think that doesn't exist anymore. https://github.com/angular/angular/issues/6910 – indra257 Apr 17 '17 at 16:52

1 Answers1

2

Try below in your DashboardComponent,

  constructor(private route: ActivatedRoute){}
  ngOnInit(){
    this.route.params.subscribe(param => {
       let id = param["id"];
       /// reload grid and charts...           
    })
  }

Hope this helps!!

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • The grids and charts are getting appended to the previous view. Is there any way that the previous view be removed before adding this. – indra257 Apr 17 '17 at 17:21
  • Won't be able to help untill I see the code.. how you are adding grid .. – Madhu Ranjan Apr 17 '17 at 17:22
  • Updated the question with more information and code. So basically the dashboard/2 gadgets are getting added to the view of dashboard/1, instead of displaying only dashboard/2 data. – indra257 Apr 17 '17 at 17:28
  • Not very clear how you are adding gadgets, i believe you must be creating components dynamically and adding to `coloneanchor`, based upon your comment it seems you may not have cleared the ref, See [this](https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html#!#clear-anchor) how to destroys all Views in this container. – Madhu Ranjan Apr 17 '17 at 18:06
  • It worked fine by clearing the anchor points. I am actually creating the Routerlinks dynamically by doing {{ dashboard.Name }} . Is there a way that the first link is automatically clicked/routed. I tried https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html but no success. – indra257 Apr 17 '17 at 19:38