angular返回上页，有backUrl返回该页（bug，数据有修改或新增时对应页面刷新）

最新推荐文章于 2024-03-06 23:24:46 发布
最新推荐文章于 2024-03-06 23:24:46 发布
阅读量869 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GXy10010/article/details/80825629
版权
本文讨论了在Angular应用中，当用户通过_backUrl返回上一页时，如何确保在数据有修改或新增的情况下正确刷新页面，解决潜在的bug。
摘要由CSDN通过智能技术生成 
 

 

 

 
 
 
  back( 
  type 
  : 
  string 
  = 
  'onOk', 
  param 
  : 
  any 
  = {}) { 
 
 
 
 
  this. 
  reset() 
 
 
 
 
  let 
 



                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  孤独是人生常态
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
AngularJS/ui.router返回上一页

				
			

			

				

					MMMMQI的博客
				

				

					05-17
					
					1024
					
				

			

		

		

			
				
最近在做老项目优化，发现原本“返回上一页”的功能，非常凌乱、可读性很差。
具体的场景是这样的
A、B、C等多个页面都可以进入到D页面，D页面里有一个“返回上一页”功能，由于D页面里有iframe每次加载都会添加浏览记录，导致history.go(-1)不能返回想要的上一页。
于是全部通过一个historyUrlService管理，在ABC页面跳转到D之前，保存来源，在D页面返回上一页的时候读取这个来源，然后手动进行跳转。
这个实现问题非常大，可能写的人熟悉业务觉得没问题，反正我看的时候全局搜索看了半天，如果

			
		

	



                

              
                



	

		

			

				
					
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)

				
			

			

				

					08-27
				

			

		

		

			
				
主要介绍了Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面,这个功能在网上商城项目上经常会用到，下面小编给大家带来了解决方法一起看看吧

			
		

	



                


  
              

                


	

		

			

				
					
angluar1+ionic详情页返回在原来的位置（缓存数据和页面高度）

				
			

			

				

					weixin_30302609的博客
				

				

					04-22
					
					307
					
				

			

		

		

			
				
因为是老项目，近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置，刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的，无法重新刷新页面reload方法失效了，那肯定是不过关的（如果没有新增和编辑的列表页可以考虑用），想了想改成了强制刷新parent.location.reload,在：$rootScope.$on（'$sta...

			
		

	





	

		

			

				
					
学习angular  ui-router - 管理状态

				
			

			

				

					kooky博客
				

				

					02-10
					
					1万+
					
				

			

		

		

			
				
参考原文：https://github.com/angular-ui/ui-router/wiki

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。

在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为通过嵌套的方式来解决页面中的一些重复出现

			
		

	



		

			
		



	

		

			

				
					
【Angular5】 返回前一页面 go back to previous page

				
			

			

				

					weixin_30307267的博客
				

				

					01-07
					
					1015
					
				

			

		

		

			
				
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-notfound',
  templateUrl: './not...

			
		

	





	

		

			

				
					
Angular8 路由使用Router

				
			

			

				

					lvxinaidou的博客
				

				

					06-10
					
					1010
					
				

			

		

		

			
				
这里写目录标题一级目录二级目录三级目录
一级目录
二级目录
三级目录



			
		

	





	

		

			

				
					
angular+ionic返回上一页并刷新页面

				
			

			

				

					08-29
				

			

		

		

			
				
Angular+Ionic返回上一页并刷新页面  Angular和Ionic是当前流行的前端框架，它们都提供了丰富的功能和插件来帮助开发者快速构建应用程序。然而，在实际开发过程中，开发者经常会遇到一些棘手的问题，例如如何返回上...

			
		

	





	

		

			

				
					
Angular刷新当前页面的实现方法

				
			

			

				

					10-17
				

			

		

		

			
				
在Angular框架中，刷新当前页面通常涉及到路由管理和组件生命周期的处理。本文将深入探讨如何在Angular应用中实现实现页面刷新的功能。  首先，从Angular 5.1版本开始，引入了一个名为`onSameUrlNavigation`的配置...

			
		

	





	

		

			

				
					
解决Angular2 router.navigate刷新页面的问题

				
			

			

				

					10-18
				

			

		

		

			
				
在使用Angular2框架进行前端开发时，我们经常会遇到由router模块的navigate方法导致页面刷新的问题。这种情况尤其容易出现在表单提交按钮中使用导航跳转时。下面，我们将详细探讨这一问题的成因以及如何解决它。  ...

			
		

	





	

		

			

				
					
Angular使用router路由，做页面跳转，传值

				
			

			

				

					cf8833的博客
				

				

					03-12
					
					2559
					
				

			

		

		

			
				
Angular使用router路由，做页面跳转，传值
step1: 添加路由模块，创建三个组件模块，首页 我的  详情页
ng generate module app-routing --flat --module=app
ng generate component user
ng generate component dashboard
ng generate component userDetail

step2:  路由  D:\vue\untitled2900\src\app\app-routing

			
		

	





	

		

			

				
					
Angular 5 路由小结

				
			

			

				

					xnyssxy的博客
				

				

					03-27
					
					8139
					
				

			

		

		

			
				
首先要添加路由模块，通常定义为 AppRoutingModule，通过CLI指令生成：ng generate module app-routing --flat --module=app--flat 把这个文件放进了 src/app 中，而不是单独的目录中。--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。生成后的代码：import { NgMod...

			
		

	





	

		

			

				
					
angular2 router中的路由跳转navigate

					
热门推荐

				
			

			

				

					erciyuan_nuonuo的博客
				

				

					01-18
					
					3万+
					
				

			

		

		

			
				
navigate是Router类的一个方法，主要用来跳转路由。 
函数定义：navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>`interface **NavigationExtras** {
  relativeTo : ActivatedRoute
  queryParams : Params
  fr

			
		

	





	

		

			

				
					
Angular开发的NativeScript项目中，如何返回上一页？

					
最新发布

				
			

			

				

					金木编程
				

				

					03-06
					
					451
					
				

			

		

		

			
				
1.使用Angular Router导航器： 如果你在应用中使用了Angular Router进行导航，你可以使用Router导航器中的navigateBack()方法来返回上一页。2.使用Frame导航器： NativeScript应用中的页面通常都包裹在一个Frame中，你可以使用Frame导航器中的goBack()方法来返回上一页。这些方法都可以在点击返回按钮或者其他触发返回上一页的事件时被调用，使用户能够返回到上一个页面。

			
		

	





	

		

			

				
					
angular Js 返回上一级页面 刷新页面的几种方法

				
			

			

				

					 Liradi-Birdy的博客
				

				

					01-25
					
					5507
					
				

			

		

		

			
				
当一个页面有多个tab的时候，从详情页面返回到主页，路由不能使用cache: true时，但是你又需要返回主页面刷新页面消息的时候，就可以使用下面的方法：


// 界面缓存清理
$ionicHistory.clearCache().then(function () {
    $state.go('tabs.headlines', { module: "ORDER" });
});


ioni

			
		

	





	

		

			

				
					
angular列表页面向详情页面传值，显示不同的内容

				
			

			

				

					Daylighte的博客
				

				

					08-01
					
					2690
					
				

			

		

		

			
				
近期项目中使用angular1.6，自己总结了列表页面向详情页面传值的问题。



需求是从此列表进入一个详情页面，需要给详情页面传入不同的值，详情页面需要接收值，显示不同的内容


&lt;a href="javascript:;"&gt;
     &lt;span class="btn btn-default btn-sm" ng-click='$ctrl.deal(item)' ng-if...

			
		

	





	

		

			

				
					
Angular使用路由复用实现返回上一个页面不刷新

				
			

			

				

					QQMESSI
				

				

					12-31
					
					3795
					
				

			

		

		

			
				
       当从列表进入详情后再返回时我们期望是页面不刷新的。在我不知道路由复用之前想要实现这个功能，我的解决方案是把一些条件存在session中，然后在ngOnInit()中去读取session再应用到页面中，这样实现了假的不刷新，但是后来发现当列表中含有大量筛选条件时，如果继续使用session的话要存好多东西。然后我就搜了一下，发现有路由复用这个概念。
路由复用存在以下几个状态：
shouldReuseRoute
适用于在路由之间

			
		

	





	

		

			

				
					
 Angular 5.0 学习8：Angular路由复用策略 (切换页面内容不丢失，保持原来状态)

				
			

			

				

					weixin_33700350的博客
				

				

					05-20
					
					3207
					
				

			

		

		

			
				
一、引言
路由在执行过程中对组件无状态操作，即路由离退时组件状态也一并被删除；当然在绝大多数场景下这是合理的。进入组件时会执行 ngOnInit() 里面的初始化方法，使页面保持最开始的状态。但有些需求需要切换页面的时候，再切换回来该页面时保持原来的状态。此时我们就需要 Angular 的RouteReuseStrategy 贯穿路由状态...

			
		

	





	

		

			

				
					
angular返回上一个页面

				
			

			

				

					05-04
				

			

		

		

			
				
在 Angular 中，可以使用 `Location` 服务来实现返回上一个页面的功能。具体步骤如下：  1. 首先在组件中引入 `Location` 服务：   ```typescript  import { Location } from '@angular/common';  ```  2. 在组件的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值