Comment recharger le courant Angulaire 2 Composants

Comment puis-je recharger le même composant dans Angulaire 2?

Voici mon code ci-dessous:

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() est lié à un événement de clic dans le modèle.

La uidproduct est un objet JSON qui a un certain nombre de propriétés et je suis à jour le DOM avec {{uidproduct.classname}}

Je suis en utilisant ce dans le modèle comme ceci:

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

Quand je clique sur le <button (click)="nextproduct()"> il va changer la propriété de classe dans les DOM mais j'ai besoin de recharger le composant pour le script externe pour avoir un effet.

Je ne pense pas tellement de composants de rechargement option serait de bon, que voulez-vous dire par j'ai besoin de reolad le composant pour le script externe pour avoir un effet.?
Le script externe est le ciblage particulier de l'élément DOM des propriétés de la classe et de l'affichage d'un produit particulier pour les DOM. Cheers!
Ce script externe?
vous ne pouvez pas charger le script externe à partir d'un modèle(il serait menace pour la sécurité), je vous recommande de passer par question
J'ai maintenant supprimé le script externe à partir du modèle, mais toutes les mises à jour sur la façon de recharger le composant serait génial!

OriginalL'auteur Dave | 2016-11-05

Vous pouvez utiliser *ngIf de re-rendre le contenu d'un modèle:

@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;
  }
}

De grands trucs, Comme ça, je recherche donc beaucoup de chose et j'ai essayé différentes juridique étape mais ne pouvait pas le succès. Dans ma langue bonne "JUGAD'

OriginalL'auteur Günter Zöchbauer

2

Je ne comprends pas pourquoi vous avez besoin de recharger le composant. Si vous êtes à la liaison aux divers domaines de l' uidproduct, puis rechargement qui doivent actualiser les valeurs indiquées dans le composant. Si le rechargement de la composante ne fait rien, mais ajouter des frais généraux.

Si il y a une excellente raison de ne pas mentionnés ici, pourquoi vous pensez que vous avez encore besoin de faire cela, alors voici ce que vous faites:
1. Accéder à un autre (éventuellement vide) de la composante.
2. Accédez directement à l'arrière.
Le problème est que vous devez attendre pour la première navigation à terminer avant de faire le second.

Dans votre composant, l'importation NavigationEnd:
```
import { Router, NavigationEnd } from '@angular/router';
```
Et puis abonnez-vous pour cela dans votre constructeur:
```
constructor(private thingService: ThisThingService, private router: Router) { 
   router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      if (event.url === '/blank') {
        this.router.navigate(['product']); 
      }
    }
  });
```
Avis que j'ai d'attente pour NavigationEnd de se produire et vérifier ensuite j'ai été routage de mon vide composant. Si c'est le vide de la composante en chemin, j'ai retourner le produit. Si vous avez vraiment besoin de passer l'IDENTIFIANT, juste de le stocker sur votre objet, et de les ajouter ici.

Au lieu de routage à votre page de produit dans nextproduct(), accédez à blank.
```
this.router.navigate(['blank']);
```
Et qui devrait recharger votre composant parfaitement bien.

Le problème que j'ai intentionnellement laissé en place pendant la simplicité, c'est que le subscribe appel dans le constructeur va exécuter pour chaque recharge. Ainsi, à titre d'exercice au lecteur, de le sortir de l'constructeur et de créer un service agréable pour elle, ou le déplacer pour le constructeur de votre application composant, ou peut-être à votre module de routage ou partout où cela fait sens pour vous.

Merci, ça fonctionne, mais la logique n'est pas droit. @Günter Zöchbauer réponse ne renouvelle pas mes services, mais il donne toutes les données renouveler dans mon composant 🙂

OriginalL'auteur Cobus Kruger

Vous devez vous connecter pour publier un commentaire.