本篇文章跟大家分享幾種Angular刷新目前頁面的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
默認,當收到導航到當前URL的請求, Angular路由器會忽略。
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
重複點擊同一連結頁面不會刷新。
從Angular 5.1起提供onSameUrlNavigation屬性,支援重新載入路由。
@NgModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], exports: [RouterModule] })
onSameUrlNavigation有兩個可選值:'reload'和'ignore',預設為'ignore'。但僅將onSameUrlNavigation改為'reload',只會觸發RouterEvent事件,頁面是不會重新載入的,還需配合其它方法。在繼續之前,我們啟用Router Trace,從瀏覽器控制台查看一下路由事件日誌:
@NgModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload', enableTracing: true})], exports: [RouterModule] })
可以看到,未配置onSameUrlNavigation時,再次點擊同一連結不會輸出日誌,設定onSameUrlNavigation為'reload '後,會輸出日誌,其中包含的事件有:NavigationStart、RoutesRecognized、GuardsCheckStart、GuardsCheckEnd、ActivationEnd、NavigationEnd等。
相關教學推薦:《angular教學》
以下介紹刷新目前頁面的幾種方法:
NavigationEnd
1、設定onSameUrlNavigation為'reload'
2、監聽NavigationEnd事件
訂閱Router Event,在NavigationEnd中重新載入數據,銷毀元件時取消訂閱:
export class HeroesComponent implements OnDestroy { heroes: Hero[]; navigationSubscription; constructor(private heroService: HeroService, private router: Router) { this.navigationSubscription = this.router.events.subscribe((event: any) => { if (event instanceof NavigationEnd) { this.init(); } }); } init() { this.getHeroes(); } ngOnDestroy() { if (this.navigationSubscription) { this.navigationSubscription.unsubscribe(); } } ... }
這種方式可按需配置要刷新的頁面,但程式碼煩瑣。
RouteReuseStrategy
#1、設定onSameUrlNavigation為'reload'
2、自訂RouteReuseStrategy,不重複使用Route
有兩種實作方式:
在程式碼中更改策略:
constructor(private heroService: HeroService, private router: Router) { this.router.routeReuseStrategy.shouldReuseRoute = function () { return false; }; }
Angular應用Router為單例對象,因此使用這種方式,在一個元件中更改策略後會影響其他元件,但從瀏覽器刷新頁面後Router會重新初始化,容易造成混亂,不建議使用。
自訂RouteReuseStrategy:
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router'; export class CustomReuseStrategy implements RouteReuseStrategy { shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void { } shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null { return null; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return false; } }
使用自訂RouteReuseStrategy:
@NgModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], exports: [RouterModule], providers: [ {provide: RouteReuseStrategy, useClass: CustomReuseStrategy} ] })
這種方式可以實作較為複雜的Route重複使用策略。
Resolve
使用Resolve可以預先從伺服器上取得數據,這樣在路由啟動前資料已準備好。
1、實作ResolverService
將元件中的初始化程式碼轉移到Resolve:
import {Injectable} from '@angular/core'; import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router'; import {Observable} from 'rxjs'; import {HeroService} from '../hero.service'; import {Hero} from '../hero'; @Injectable({ providedIn: 'root', }) export class HeroesResolverService implements Resolve<Hero[]> { constructor(private heroService: HeroService) { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero[]> | Observable<never> { return this.heroService.getHeroes(); } }
為路由設定resolve:
path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}
2、修改元件程式碼,改為從resolve中取得資料
constructor(private heroService: HeroService, private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe((data: { heroes: Hero[] }) => { this.heroes = data.heroes; }); }
3、設定onSameUrlNavigation為'reload'
{path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}, runGuardsAndResolvers: 'always'}
時間戳
#給Router時間參數:<a (click)="gotoHeroes()">Heroes</a>
constructor(private router: Router) { } gotoHeroes() { this.router.navigate(['/heroes'], { queryParams: {refresh: new Date().getTime()} }); }然後在元件中訂閱queryParamMap:
constructor(private heroService: HeroService, private route: ActivatedRoute) { this.route.queryParamMap.subscribe(params => { if (params.get('refresh')) { this.init(); } }); }更多程式相關知識,請造訪:
程式設計影片! !
以上是Angular怎麼刷新目前頁面?方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!