angular2 обновить компонентный шаблон

Question

Я изменил шаблон компонента html, но изменения не были отражены в моем приложении. Есть ли способ заставить приложение обновить все его компоненты и шаблоны?

Осмотревшись большинство людей говорят, чтобы использовать

ApplicationRef.tick() - аналогично Угловое 1-х $rootScope.$digest() - то есть, проверить полное дерево компонентов

NgZone.run(callback) - похожий на $rootScope.$apply(callback) - то есть, оценить функцию обратного вызова внутри Угловая зона 2. Я думаю, но я не уверен, что это завершает проверку полного дерева компонентов после выполнения функции обратного вызова.

ChangeDetectorRef.detectChanges() - аналогично $scope.$digest() - то есть, проверить только этот компонент и его потомков

Но все они, кажется, если вы измените переменную и необходимо обновить компонент. Все, что я сделал, это изменение некоторого html и желание повторно отобразить измененный html, но он, похоже, кэшируется.

Я попробовал ChangeDetectorRef как следует, но это, похоже, не делать ничего:

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

Или есть папка файлов можно просто удалить, чтобы принудительно обновить?

Answer 1

Хорошо, я, кажется, исправил свою проблему, добавив компилятор времени выполнения, чтобы вручную очистить кеш - кажется, глупо делать это программно (вместо того, чтобы просто удалять некоторые файлы). Но я оставлю это открытое в случае, если кто найдет лучшее решение,

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

Я также просто сталкивался с этим вопросом, который имеет больше вариаций о том, как очистить кэш шаблона: How to clear template cache