angular2 aktualisieren Komponente Vorlage

Question

Ich habe meine Komponente Vorlage HTML geändert, aber die Änderungen wurden nicht in meiner App widergespiegelt. Gibt es eine Möglichkeit, die App zu zwingen, alle ihre Komponenten und Vorlagen zu aktualisieren?

Nachdem sah sich die meisten Menschen

ApplicationRef.tick() verwenden sagen - zu Angular ähnlich 1en $rootScope.$digest() - dh überprüfen Sie die vollständige Komponentenbaum

NgZone.run(callback) - ähnlich wie $rootScope.$apply(callback) - dh bewerten innerhalb der Callback-Funktion die Angular 2-Zone. Ich denke, aber ich bin mir nicht sicher, dass das den gesamten Komponentenbaum nach dem Ausführen der Callback-Funktion überprüft.

ChangeDetectorRef.detectChanges() - ähnlich wie $scope.$digest() - das heißt, überprüfen Sie diese Komponente nur und seine Kinder

Aber sie alle zu sein scheinen, wenn Sie eine Variable ändern und die Komponente aktualisieren müssen. Alles, was ich getan habe, ist etwas HTML zu ändern und den geänderten HTML-Code neu zu rendern, aber es scheint im Cache gespeichert zu sein.

habe ich versucht, die ChangeDetectorRef wie folgt, aber es scheint nichts zu tun:

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { Hero } from '../classes/hero'; 
import { HeroService } from '../services/hero.service'; 

@Component({ 
    selector: 'my-dashboard', 
    templateUrl: '/app/templates/dashboard.component.template.html', // I just want to refresh some changes I made in this file 
    changeDetection: ChangeDetectionStrategy.OnPush // I have tried with and without this - doesn't seem to do anything for me 
}) 

export class DashboardComponent implements OnInit { 
    heroes: Hero[] = []; 

    constructor(
     private ref: ChangeDetectorRef, 
     private router: Router, 
     private heroService: HeroService 
    ) { 
     this.ref.markForCheck(); // make it check for changes 
    } 

    public ngOnInit(): void { 
     this.getHeroes(); 
    } 

    public gotoDetail(hero: Hero): void { 
     let link = ['/detail', hero.id]; 
     this.router.navigate(link); 
    } 

    private getHeroes(): void { 
     console.log('sdklfn;') 
     this.heroService.getHeroes() 
      .then(heroes => this.heroes = heroes.slice(1, 5)); 
    } 
} 

Oder gibt es einen Ordner von Dateien kann ich nur eine Aktualisierung erzwingen löschen zu?

Answer 1

Ok, ich habe mein Problem behoben, indem ich einen Laufzeitcompiler hinzugefügt habe, um den Cache manuell zu löschen - es scheint dumm, dies programmatisch zu tun (anstatt nur einige Dateien löschen zu können). Aber ich werde diese offen für den Fall, lassen jemand eine bessere Lösung

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { RuntimeCompiler} from '@angular/compiler'; // add this 

import { Hero } from '../classes/hero'; 
import { HeroService } from '../services/hero.service'; 

@Component({ 
    selector: 'my-dashboard', 
    templateUrl: '/app/templates/dashboard.component.template.html', // I just want to refresh some changes I made in this file 
}) 

export class DashboardComponent implements OnInit { 
    heroes: Hero[] = []; 

    constructor(
     private runtimeCompiler: RuntimeCompiler, // add this 
     private router: Router, 
     private heroService: HeroService 
    ) { 
     this.runtimeCompiler.clearCache(); // add this 
    } 

    public ngOnInit(): void { 
     this.getHeroes(); 
    } 

    public gotoDetail(hero: Hero): void { 
     let link = ['/detail', hero.id]; 
     this.router.navigate(link); 
    } 

    public getHeroes(): void { 
     this.heroService.getHeroes() 
      .then(heroes => this.heroes = heroes.slice(1, 5)); 
    } 
} 

Ich habe auch nur kommen über diese Frage findet, die mehr Variationen hat, wie die Template-Cache löschen: How to clear template cache