angular2 refresh component template [duplicate]

问题

I have changed my component template html but the changes are not been reflected in my app. Is there a way to force the app to refresh all of it's components and templates?

Having looked around most people say to use

ApplicationRef.tick() - similar to Angular 1's $rootScope.$digest() -- i.e., check the full component tree

NgZone.run(callback) - similar to $rootScope.$apply(callback) -- i.e., evaluate the callback function inside the Angular 2 zone. I think, but I'm not sure, that this ends up checking the full component tree after executing the callback function.

ChangeDetectorRef.detectChanges() - similar to $scope.$digest() -- i.e., check only this component and its children

But they all seem to be for if you change a variable and need to refresh the component. All I have done is change some html and want to re-render the changed html but it seems to be cached.

I tried the 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?

回答1:

Ok, I seem to have fixed my issue by adding a runtime compiler to manually clear the cache - seems daft to have to do this programatically (rather than being able to just delete some files). But I'll leave this open in case anyone finds a better solution

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

I have also just come across this question which has more variations on how to clear the template cache: How to clear template cache

来源：https://stackoverflow.com/questions/39849122/angular2-refresh-component-template

标签

angular

typescript

angular-cache