CODEWITHSUNDEEP
angular
Present practice
Present practice

Reputation: 601

Angular4 reload component when URL changes

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]);
}

}

Upvotes: 3

Views: 4577

Answers (1)

Kraken
Kraken

Reputation: 1955

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.

Upvotes: 7

Related Questions