您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Angular如何實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的功能,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
??從angular5.1起提供onSameUrlNavigation來(lái)支持路由重新加載。、
??有兩個(gè)值'reload'和'ignore'。默認(rèn)為'ignore'
??定義當(dāng)路由器收到一個(gè)導(dǎo)航到當(dāng)前 URL 的請(qǐng)求時(shí)應(yīng)該怎么做。 默認(rèn)情況下,路由器將會(huì)忽略這次導(dǎo)航。但這樣會(huì)阻止類似于 "刷新" 按鈕的特性。 使用該選項(xiàng)可以配置導(dǎo)航到當(dāng)前 URL 時(shí)的行為。
使用
配置onSameUrlNavigation
@NgModule({ imports: [RouterModule.forRoot( routes, { onSameUrlNavigation: 'reload' } )], exports: [RouterModule] })
??reload實(shí)際上不會(huì)重新加載路由,只是重新出發(fā)掛載在路由器上的事件。
??runGuardsAndResolvers有三個(gè)值:
paramsChange: 僅在路由參數(shù)更改時(shí)觸發(fā)。如/reports/:id 中id更改
paramsOrQueryParamsChange: 當(dāng)路由參數(shù)更改或參訓(xùn)參數(shù)更改時(shí)觸發(fā)。如/reports/:id/list?page=23中的id或page屬性更改
always?:始終觸發(fā)
const routes: Routes = [ { path: '', children: [ { path: 'report-list', component: ReportListComponent }, { path: 'detail/:id', component: ReportDetailComponent, runGuardsAndResolvers: 'always' }, { path: '', redirectTo: 'report-list', pathMatch: 'full' } ] } ];
import {Component, OnDestroy, OnInit} from '@angular/core'; import {Observable} from 'rxjs'; import {Report} from '@models/report'; import {ReportService} from '@services/report.service'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; @Component({ selector: 'app-report-detail', templateUrl: './report-detail.component.html', styleUrls: ['./report-detail.component.scss'] }) export class ReportDetailComponent implements OnInit, OnDestroy { report$: Observable<Report>; navigationSubscription; constructor( private reportService: ReportService, private router: Router, private route: ActivatedRoute ) { this.navigationSubscription = this.router.events.subscribe((event: any) => { if (event instanceof NavigationEnd) { this.initLoad(event); } }); } ngOnInit() { const id = +this.route.snapshot.paramMap.get('id'); this.report$ = this.reportService.getReport(id); } ngOnDestroy(): void { // 銷毀navigationSubscription,避免內(nèi)存泄漏 if (this.navigationSubscription) { this.navigationSubscription.unsubscribe(); } } initLoad(e) { window.scrollTo(0, 0); console.log(e); } }
關(guān)于Angular如何實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。