Angular4 reload component when URL changes

Question

I didn't find accepted answers to similar questions, so please don't mark it as a duplicate. I have a 'request-summary' component and 'search' component. 'Search' component is rendered as a pop-up window in 'request-summary' component. I need to click on a matching result in search component and being redirected to a new 'request-summary' page. 'request-summary' subscribed to URL changes and sees them successfully, but doesn't reload itself. How to achieve it?

@Component({
  selector: 'request-summary',
  templateUrl: './request-summary.html',
  styleUrls: ['./request-summary.css'],
  encapsulation: ViewEncapsulation.None
})
export class RequestSummaryComponent {
  private subscription: Subscription;
  private requestId:number;

constructor(private documentService: DocumentService,private router: 
  Router,private activatedRoute: ActivatedRoute,private requestDist: 
  RequestDistService,private eRef: ElementRef){         
}   

ngOnInit() {   
    this.activatedRoute.params.subscribe(params => {
        this.requestId = params['requestId']
        console.log("URL id has changed")
    });
    this.getRequestInfo();  //some  logic for rendering selected request 
     info
}

Search component:

@Component({
  selector: 'search',
  templateUrl: './search.html',
  styleUrls: ['./search.css'],
})
export class SearchComponent {
  public userInput = '';
  private data = []

constructor(private requestDist : RequestDistService, private router: 
  Router) {   }

openSelectedGroup(id){   //click event
    this.router.navigate(['./../requestSummary/'+id]);
}

}

Kraken · Accepted Answer · 2018-02-13 15:12:59Z

7

You are actually doing nothing right now expect that getting route params, change your ngOnInit to this and it would work

ngOnInit() {   
    this.activatedRoute.params.subscribe(params => {
        this.requestId = params['requestId']
        console.log("URL id has changed")
        this.getRequestInfo(); 
    });

}

It is not rerendering component itself, but getting new data all the time when route changes if your logic will be included into this subscription.

answered Feb 13, 2018 at 15:12

Kraken

1,97516 silver badges23 bronze badges

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

1 Comment

Present practice Over a year ago

totally make sense. Thank you!

Collectives™ on Stack Overflow

Angular4 reload component when URL changes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related