angular实现页面跳转，并且刷新页面（重新请求后台接口）

最新推荐文章于 2024-06-08 19:22:30 发布
最新推荐文章于 2024-06-08 19:22:30 发布
阅读量1.6w 收藏 2
点赞数 2
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/52095916
版权

1、在controller中注入$state

2、语法：$state.go("目标路由"，{}，{reload：true})

3、在目标路由（router）中配置cache:false（禁用缓存）

Take_Dream
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
angular同一页面跳转重新执行方法
恍若c的博客
09-28 2315
问题：当收到导航到当前URL的请求，Angular路由器会忽略，重复点击同一链接页面不会刷新，也不会重新执行ngOnInit函数。
angular2中router路由跳转navigate的使用与刷新页面问题详解
01-19
本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容，分享出供大家参考学习，下面来看看详细的介绍： 一、router.navigate的使用 navigate是Router类的一个方法，主要用来跳转路由。 函数定义： navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment
Angular新建页面流程
最新发布
qq_20382175的博客
06-08 87
https://juejin.cn/post/6844904151374102535
angular 重新加载当前页面
weixin_42593701的博客
01-09 1095
在 Angular 中，可以使用 location.reload() 方法来重新加载当前页面。你可以在组件的方法中调用这个方法，例如： reloadPage() { location.reload(); } 登录后复制 然后在组件模板中绑定到按钮上，就可以在点击按钮时重新加载页面了。 <button (click)="reloadPage()">重新加载页面</button&...
angular设置路由实现无刷新跳转
bem_zj的博客
05-17 4336
angular设置路由实现无刷新跳转
ionic angular 刷新tab页面
meng1128的博客
08-31 422
this.router.navigate(['user'],{ replaceUrl: true })
Angular刷新当前页面的实现方法
10-17
主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
单页面后台管理html模板
04-19
单页面应用的核心是利用Ajax技术实现页面的无刷新更新。用户在页面上的所有操作，如点击导航、提交表单等，都通过JavaScript处理，避免了传统HTTP请求导致的页面跳转，提高了应用的响应速度和用户体验。 2. **HTML...
后台管理系统，登录页面demo
05-13
如果验证成功，服务器会返回一个成功状态，前端据此更新页面，如跳转到主界面；反之，将显示错误信息。 5. **安全考虑**： - **密码加密**：为了保护用户信息安全，密码通常在客户端进行哈希处理后再发送，服务器...
us-bms-fe:us后台管理系统前端页面
04-28
1. **路由管理**：前端页面通常采用单页应用（SPA）架构，通过路由管理实现页面间的跳转。JavaScript库如React Router或Vue Router可以用来管理应用的不同视图，确保用户在不刷新整个页面的情况下访问不同的功能模块...
angular2-system:Angular2 web后台管理系统
03-11
6. 路由（Routing）：Angular2的路由系统支持单页应用（SPA）的页面跳转和导航，实现了页面间的无刷新切换。 二、Angular2的开发流程 1. 安装：首先需要安装Node.js环境，然后通过npm（Node包管理器）全局安装...
js 页面切换
03-19
3. AJAX（Asynchronous JavaScript and XML）：AJAX允许在后台与服务器交换数据并局部更新页面，而无需整体刷新。通过XMLHttpRequest对象，可以异步发送HTTP请求，获取数据后动态更新DOM。 4. 路由（Routing）：在...
angularjs 让当前路由重新加载_根据AngularJS重新加载当前路由页面，有哪些方法？...
weixin_39915668的博客
12-20 158
下面我就为大家分享一篇AngularJS中重新加载当前路由页面的方法，具有很好的参考价值，希望对大家有所帮助。这个问题同样困扰我很久，网上的回答五花八门，全都不能解决；终于在网上找很久，看到某大神的解决办法，整理作此分享；使用ui-router重新加载当前页面的问题。(ui-router版本需要是0.2.14以上的)用angular做项目，会碰到需要点击菜单刷新当前页面，加载当前页面，但是同一个路...
Angular刷新当前页面的几种方法（转载）
xuehu837769474的博客
03-09 9167
默认，当收到导航到当前URL的请求，Angular路由器会忽略。 <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 重复点击同一链接页面不会刷新。 从Angular 5.1起提供onSameUrlNavigation属性，支持重新加载路由。 @NgModule({ impor...
Angular中路由地址不变实现刷新的方式
cc的博客
12-22 3158
版本：Angular11 第一种方式 首先在app-routing文件下设置RouterModule在点击相同的路由下能触发路由事件 @NgModule({ imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })], exports: [RouterModule] }) export class AppRoutingModule { } 然后再去需要刷新的页面获取路由触发事件，在路由导航成功
angular异步获取数据导致视图无法实时刷新的问题
weixin_44258574的博客
05-12 2292
场景： 获取表格数据时明明已经成功发送接口并获取到值了，但是页面就是没有更新，需要再点一次才能触发页面更新 说明： 针对我的此场景最终试验只有最终方案有效，但因此而产生的一些思路也记录一下，大家可以直接跳到思路四最终方案啦哈哈 思路一 以为是UI组件库造成的，参照网上说法：（https://blog.csdn.net/walker4000/article/details/109915064） 问题在于nz-zorro（angular的一个UI组件库，类似于ant-design）从7.0版本开始，组件默
Angular刷新当前页面的几种方法
热门推荐
weixin_33725807的博客
12-25 1万+
默认，当收到导航到当前URL的请求，Angular路由器会忽略。 <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 重复点击同一链接页面不会刷新。 从Angular 5.1起提供onSameUrlNavigation属性，支持重新加载路由。 @NgModule({ imports: [RouterM...
angular tab页签隐藏与显示
我的博客
03-22 254
angular tab页签隐藏与显示
angular 脏数据刷新，刷新数据
LYBWWP
01-09 1564
angular强制刷新数据， //判断angualr是否在进行脏检测 if (!$scope.$$phase && !$scope.$root.$$phase) { $scope.$apply(); }
angular页面跳转并且销毁当前页面
06-10
在Angular中，可以使用路由模块来进行页面跳转，并且在页面跳转后销毁当前页面。下面是一个简单的例子： 1. 首先，在组件中，需要订阅路由事件，以便在路由导航发生时销毁当前组件。例如： ``` import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { filter, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @Component({ selector: 'app-home', template: ` <button (click)="goToAbout()">Go to About</button> ` }) export class HomeComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject<void>(); constructor(private router: Router) { } ngOnInit() { this.router.events.pipe( filter(event => event instanceof NavigationEnd), takeUntil(this.unsubscribe$) ).subscribe(() => { this.unsubscribe$.next(); this.unsubscribe$.complete(); }); } ngOnDestroy() { this.unsubscribe$.next(); this.unsubscribe$.complete(); } goToAbout() { this.router.navigate(['/about']); } } ``` 在这个例子中，首先定义了一个名为unsubscribe$的Subject对象，用于在销毁组件时取消订阅路由事件。然后在ngOnInit()方法中，订阅路由事件，并在路由导航完成后销毁当前组件，同时取消订阅路由事件。在goToAbout()方法中，使用router.navigate()方法来导航到/about路径。 2. 在路由模块中，需要配置路由守卫，以便在路由导航发生时销毁当前组件。例如： ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { AboutComponent } from './about.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent, canActivate: [DestroyGuard] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` 在这个例子中，路由模块中配置了一个DestroyGuard守卫，用于在路由导航发生时销毁当前组件。可以在守卫中实现CanActivate接口，并在canActivate()方法中销毁当前组件。例如： ``` import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class DestroyGuard implements CanActivate { constructor(private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { setTimeout(() => { this.router.getCurrentNavigation().previousNavigation?.extractedUrl.segment.shift(); }); return true; } } ``` 在这个例子中，首先在canActivate()方法中，使用setTimeout()方法来延迟执行一段时间。然后使用this.router.getCurrentNavigation().previousNavigation?.extractedUrl.segment.shift()方法来将前一个导航的路径中的第一个片段（即当前组件的路径）从导航历史记录中删除。这样，当页面跳转完成后，就会自动销毁当前组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值