Angular中路由地址不变实现刷新的方式

版本：Angular11

• 第一种方式

首先在app-routing文件下设置RouterModule在点击相同的路由下能触发路由事件

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后再去需要刷新的页面获取路由触发事件，在路由导航成功结束以后再去调用获取数据的方法

export class PersonnelComponent implements OnInit, OnDestroy {
	
 subscription: Subscription;

 constructor(
    private router: Router
  ) {
    this.subscription = this.router.events.pipe(
    	// 过滤出NavigationEnd事件即可 次事件为路由导航成功结束触发的事件
      	filter((event: RouterEvent) => event instanceof NavigationEnd),
      	// 跳过第一次加载 第一次会执行this.getList()方法，再执行就会发送两次请求
      	skip(1)
    ).subscribe(
    	// getList()获取页面数据的方法
    	() => this.getList()
    )
  }
 ngOnInit(): void {
	this.getList();
 }
 ngOnDestroy(): void {
 	// 就算组件被销毁了 路由订阅事件还是一直有用的 要记得手动取消订阅
    this.subscription.unsubscribe();
 }
}

• 第二种方式
  这种方式必须在设置了resolve守卫的情况下才能生效
  首先还是在app-routing文件下设置 onSameUrlNavigation: 'reload'属性
  然后在对应的子路由文件下设置runGuardsAndResolvers: 'always'
  但是此方法会在第一次加载的时候发送两次数据请求

const routes: Routes = [
  {
    path: '',
    component: ShiftComponent,
    resolve: {
      'shiftData': ShiftResolve
    },
    runGuardsAndResolvers: 'always'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShiftRoutingModule { }

• 第三种方式

在路由跳转的时候直接在ts文件中手动跳转，并附带一个刷新参数

<div class="drawer-item" routerLinkActive="selected" (click)="redirectTo('/admin/personnel')" [routerLink]="['/admin/personnel']">带参数实现刷新</div>

手动跳转

this.router.navigate([url], {
      queryParams: { 'time': Date.now() }
});

然后在跳转的页面获取刷新参数的订阅中获取数据

ngOnInit(): void {
    this.activatedRoute.queryParamMap.pipe(skip(1)).subscribe(
      () => {
        this.getList();
      }
    );
    this.getList();
  }