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刷新組件模板

回答

相關問題