javascript - How to reload the current Angular 2 Component - Stack Overflow

admin管理员组

文章数量:1194584

How can I reload the same component again in Angular 2?

Here is my code below:

import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { productModel } from '../_models/index';
import { categoryListService } from '../_services/index';

@Component({
  selector: 'app-product',
  templateUrl: 'productponent.html',
  styleUrls: ['productponent.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 i = this.uidproduct.order;
    this.categoryListService.findNextproduct(this.uidproduct);
    this.param = ++i;
    this.router.navigate([`/product/${this.param}`]);
  }
}

nextproduct() is bound to a click event in the template.

The uidproduct is a JSON object that has a number of properties and i'm updating the DOM with {{uidproduct.classname}}

I'm using this in the template like this:

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

When I click the <button (click)="nextproduct()"> it will change the class property in the DOM but I need to reload the component for the external script to have effect.

How can I reload the same component again in Angular 2?

Here is my code below:

import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { productModel } from '../_models/index';
import { categoryListService } from '../_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 i = this.uidproduct.order;
    this.categoryListService.findNextproduct(this.uidproduct);
    this.param = ++i;
    this.router.navigate([`/product/${this.param}`]);
  }
}

nextproduct() is bound to a click event in the template.

The uidproduct is a JSON object that has a number of properties and i'm updating the DOM with {{uidproduct.classname}}

I'm using this in the template like this:

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

When I click the <button (click)="nextproduct()"> it will change the class property in the DOM but I need to reload the component for the external script to have effect.

• javascript
• angular
• typescript
• angular-components

Share Improve this question Follow edited Dec 28, 2019 at 22:18 georgeawg 48.9k1313 gold badges7676 silver badges9898 bronze badges asked Nov 5, 2016 at 16:06 DaveDave 33411 gold badge55 silver badges2323 bronze badges 6

• I don't think so component reloading option would be good ever, what do you mean by I need to reolad the component for the external script to have effect.? – Pankaj Parkar Commented Nov 5, 2016 at 16:08
• The external script is targeting that particular DOM element class property and rendering a particular product to the DOM. Cheers! – Dave Commented Nov 5, 2016 at 16:15
• What external script? – jonrsharpe Commented Nov 5, 2016 at 16:18
• @Dave you can't load external script from template(it would be security threat), I'd recommend you to go through this question – Pankaj Parkar Commented Nov 5, 2016 at 16:20
• 2 @PankajParkar I have now removed the external script from the template but any updates on how to reload the component would be awesome! – Dave Commented Nov 5, 2016 at 16:59

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 22

You can use *ngIf to re-render the content of a 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;
  }
}

I don't understand why you need to reload the component. If you're binding to the various fields of uidproduct, then reloading that should refresh the values shown in the component. So reloading the component does nothing but add overhead.

If there is a terrific reason not mentioned here why you think you still need to do this, then here is what you do:

1. Navigate to another (possibly blank) component.
2. Navigate directly back.

The problem is that you need to wait for the first navigation to finish before doing the second one.

In your component, import NavigationEnd:

import { Router, NavigationEnd } from '@angular/router';

And then subscribe to it in your constructor:

constructor(private thingService: ThisThingService, private router: Router) { 
   router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      if (event.url === '/blank') {
        this.router.navigate(['product']); 
      }
    }
  });

Notice that I wait for NavigationEnd to happen and then check to see I was routing to my blank component. If it is the blank component's path, I navigate back to the product. If you really need to pass that ID, just store it on your object and add it here.

Instead of routing to your product page in nextproduct(), navigate to blank.

this.router.navigate(['blank']);

And that should reload your component perfectly fine.

The problem I intentionally left in for simplicity, is that the subscribe call in the constructor will execute for every reload. So as an exercise to the reader, take it out of the constructor and create a nice service for it, or move it to the constructor of your app component, or maybe to your routing module or wherever makes sense to you.

本文标签： javascriptHow to reload the current Angular 2 ComponentStack Overflow