javascript - How to reload the current Angular 2 Component -

how can reload same component again in angular 2?

here code below:

import { component, oninit, elementref, renderer } '@angular/core'; import { router, activatedroute, params } '@angular/router'; import { productmodel } '../_models/index'; import { categorylistservice } '../_services/index';  @component({   selector: 'app-product',   templateurl: 'product.component.html',   styleurls: ['product.component.css'] }) export class productcomponent implements oninit {   uidproduct: productmodel;   param: number;   constructor(     private elementref: elementref,     private route: activatedroute,     private router: router,     private categorylistservice: categorylistservice) { }    ngoninit() {     this.route.params.subscribe(product => {       console.log('logging sub product obj', product);     });     this.uidproduct = json.parse(sessionstorage.getitem('product'));     var s = document.createelement("script");     s.type = "text/javascript";     s.src = "http://this/external/script/needs/to/be/loaded/each/time.js";     this.elementref.nativeelement.appendchild(s);   }   nextproduct(){      let = this.uidproduct.order;     this.categorylistservice.findnextproduct(this.uidproduct);     this.param = ++i;     this.router.navigate([`/product/${this.param}`]);   } } 

nextproduct() bound click event in template.

the uidproduct json object has number of properties , i'm updating dom {{uidproduct.classname}}

i'm using in template this:

<div id="selected-product" class="{{uidproduct.classname}}"> 

when click <button (click)="nextproduct()"> change class property in dom need reload component external script have effect.

you can use *ngif re-render content of template:

@component({   selector: '...',   template: ` <ng-container *ngif="!rerender">  template content here </ng-container>` }) export class mycomponent {   rerender = false;   constructor(private cdref:changedetectorref){}   dorerender() {     this.rerender = true;     this.cdref.detectchanges();     this.rerender = false;   } }