angular2刷新组件模板

我已经更改了我的组件模板html，但更改未反映在我的应用程序中。有没有办法强制应用程序刷新它的所有组件和模板？angular2刷新组件模板

说完看了看周围大多数人认为使用

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

还是有我可以删除强制刷新文件的文件夹？

来源

2016-10-04 Pete

你是怎么做的更改模板。您不能修改实例化组件的模板。您可能会动态创建一个使用新模板的新组件实例。 –

它只是一个html文件，所以我只是编辑它，因为我按照[教程]中的说明（https://angular.io/docs/ts/latest/tutorial/toh-pt5.html） - 它从来没有说过关于缓存的任何内容以及如何刷新模板以显示更改！组件应该被实例化，因为我可以浏览到url并查看正在提供的旧模板 – Pete

Angular在创建新组件时只编译模板，并且只使用编译后的输出，并且完全不关心用原始模板做什么后来。恕我直言，这种方法根本不适合Angular2。我建议你在尝试应用Angular1中习惯的方法之前，通过http://angular.io上的教程进行工作。 Angular2和Angular1没有很多共同之处。 –

好吧，我似乎已经解决了我的问题，通过添加运行时编译器手动清除缓存 - 似乎愚蠢的必须以编程方式执行此操作（而不是能够删除一些文件）。但我会离开这个开放的情况下，有人发现了一个更好的解决方案

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

来源

2016-10-04 10:58:58 Pete

angular2刷新组件模板

回答

相关问题