onSameUrlNavigation
從angular5.1起提供onSameUrlNavigation來支持路由重新加載。
有兩個(gè)值'reload'和'ignore'。默認(rèn)為'ignore'
定義當(dāng)路由器收到一個(gè)導(dǎo)航到當(dāng)前 URL 的請求時(shí)應(yīng)該怎么做。 默認(rèn)情況下,路由器將會忽略這次導(dǎo)航。但這樣會阻止類似于 "刷新" 按鈕的特性。 使用該選項(xiàng)可以配置導(dǎo)航到當(dāng)前 URL 時(shí)的行為。
使用
配置onSameUrlNavigation
@NgModule({ imports: [RouterModule.forRoot( routes, { onSameUrlNavigation: 'reload' } )], exports: [RouterModule]})reload實(shí)際上不會重新加載路由,只是重新出發(fā)掛載在路由器上的事件。
配置runGuardsAndResolvers
runGuardsAndResolvers有三個(gè)值:
const routes: Routes = [ { path: '', children: [ { path: 'report-list', component: ReportListComponent }, { path: 'detail/:id', component: ReportDetailComponent, runGuardsAndResolvers: 'always' }, { path: '', redirectTo: 'report-list', pathMatch: 'full' } ] }];組件監(jiān)聽router.events
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); }}以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答