webentwicklung-frage-antwort-db.com.de

So laden Sie den Strom neu Angular 2 Komponente

Wie kann ich dieselbe Komponente in Angular 2 erneut laden?

Hier ist mein Code:

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() ist an ein Klickereignis in der Vorlage gebunden.

Die Variable uidproduct ist ein JSON-Objekt mit einer Reihe von Eigenschaften. Ich aktualisiere das DOM mit {{uidproduct.classname}}.

Ich verwende das in der Vorlage so: 

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

Wenn ich auf <button (click)="nextproduct()"> klicke, wird die Klasseneigenschaft im DOM geändert, aber ich muss die Komponente erneut laden, damit das externe Skript Wirkung zeigt.

5
Dave

Sie können *ngIf verwenden, um den Inhalt einer Vorlage erneut zu rendern:

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

Ich verstehe nicht, warum Sie die Komponente neu laden müssen. Wenn Sie an die verschiedenen Felder von uidproduct gebunden sind, sollten Sie beim erneuten Laden die in der Komponente angezeigten Werte aktualisieren. Das erneute Laden der Komponente führt also nur zu zusätzlichen Kosten.

Wenn es einen tollen Grund gibt, der hier nicht erwähnt wird, warum Sie denken, dass Sie das noch tun müssen, dann tun Sie Folgendes:

  1. Navigieren Sie zu einer anderen (möglicherweise leeren) Komponente.
  2. Direkt zurück navigieren.

Das Problem ist, dass Sie warten müssen, bis die erste Navigation abgeschlossen ist, bevor Sie die zweite Navigation durchführen.

Importieren Sie in Ihrer Komponente NavigationEnd:

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

Und dann abonnieren Sie es in Ihrem Konstruktor:

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

Beachten Sie, dass ich auf das Auftreten von NavigationEnd warte, und überprüfen Sie dann, ob ich zu meiner leeren Komponente weitergeleitet wurde. Wenn es sich um den Pfad der leeren Komponente handelt, gehe ich zurück zum Produkt. Wenn Sie diese ID wirklich übergeben müssen, speichern Sie sie einfach in Ihrem Objekt und fügen Sie sie hier hinzu.

Navigieren Sie nicht zu Ihrer Produktseite in nextproduct(), sondern zu blank.

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

Und das sollte Ihre Komponente vollkommen neu laden. 

Das Problem, das ich der Einfachheit halber gelassen habe, ist, dass der Aufruf subscribe im Konstruktor für jedes Neuladen ausgeführt wird. Als Übung für den Leser sollten Sie ihn aus dem Konstruktor herausnehmen und einen Nice-Service für ihn erstellen oder ihn in den Konstruktor Ihrer App-Komponente verschieben oder vielleicht zu Ihrem Routing-Modul oder wo immer es für Sie sinnvoll ist.

2
Cobus Kruger