Шаблон компонента обновления angular2

Question

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

Посмотрев вокруг, большинство людей говорят, что используют

ApplicationRef.tick() - похоже на Angular 1 $rootScope.$digest() - т.е. проверить полное дерево компонентов

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

ChangeDetectorRef.detectChanges() - похожий на $scope.$digest() проверять только этот компонент и его дочерние элементы

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

Я попробовал ChangeDetectorRef as follows but it did not seem to do anything:

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

Or is there a folder of files I can just delete to force a refresh?

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

Я также только что столкнулся с этим вопросом, который имеет больше вариантов, как очистить кэш шаблона: Как очистить кэш шаблона