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

最新推荐文章于 2022-03-12 18:49:09 发布
最新推荐文章于 2022-03-12 18:49:09 发布
阅读量885 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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 self 
  = 
  this; 
 
 
 
 
  if (self.backUrl) { 
 
 
 
 
  this.router. 
  navigateByUrl(self.backUrl, param); 
 
 
 

   } 
  else { 
 
 
 

   history. 
  back(); 
 
 
 

   } 
 
 
 

   } 
 
 

 

_backUrl:"url
 

 
 
 
  get 
  backUrl() { 
 
 
 
 
  return 
  this._backUrl; 
 
 
 

   } 
 
 
 
 
 
 
  set 
  backUrl( 
  value) { 
 
 
 
 
  this._backUrl 
  = value; 
 
 
 

   } 
 
 

 

 
 
 


                

        

        

    

  


    

      

        

            

              
                
                  孤独是人生常态
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

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

				
			

			

				

					08-29
				

			

		

		

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

			
		

	



                

            
              



	

		

			

				
					
Angular4_ 返回上一页

				
			

			

				

					Martin 的博客
				

				

					05-08
					
					1万+
					
				

			

		

		

			
				
最简单的实现方法。。。<button (click)="goBack()" class="btn btn-outline-info" style="float:left;width:180px">Back</button>goBack() {
    history.go(-1);
  }如果想保留数据。可以选择路由复用链接：点击打开链接可能出现的错误：点击打开链接...

			
		

	



              


  
              

                


	

		

			

				
					
angularjs 路由回退，返回到上一个路由

				
			

			

				

					Four的博客
				

				

					03-08
					
					2万+
					
				

			

		

		

			
				
在现阶段比较流行的angularjs框架中；路由是一个比较重要的应用；angularjs的单页面是其强大功能之一；
所有的页面其实就只是在一个页面就实现的：angularjs通过对路由的控制来进行页面的跳转；
使用过angularjs的开发者都知道怎么使用ngRoute服务进行页面控制；但是楼主在最近的开发之中；
遇到一个比较棘手的问题：原本app,js已经配置好的路由，每一个页面在使用时对

			
		

	





	

		

			

				
					
在angularJS中实现返回前一页

				
			

			

				

					...
				

				

					04-13
					
					1万+
					
				

			

		

		

			
				
html
  
  
app
    angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap'])
        .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

            // For any unmatched url, re

			
		

	



		

			
		



	

		

			

				
					
angular history.back需要注意

				
			

			

				

					yzk527498580的专栏
				

				

					09-21
					
					3489
					
				

			

		

		

			
				
$scope.searchPatient = function(){
                        var searchBox= '';
                        searchBox= $scope.temp.brbl;
                        $scope.pageIndex = 0;

			
		

	





	

		

			

				
					
AngularJS/ui.router返回上一页

				
			

			

				

					MMMMQI的博客
				

				

					05-17
					
					1040
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					10-17
				

			

		

		

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

			
		

	





	

		

			

				
					
AngularJs返回前一页面时刷新一次前面页面的方法

				
			

			

				

					10-17
				

			

		

		

			
				
总结来说，在AngularJs中实现返回页面时刷新前一页面的方法，可以利用$location服务来获取和修改URL，通过监听$rootScope上的$locationChangeStart和$locationChangeSuccess事件来判断路由变化，并且可以结合$...

			
		

	





	

		

			

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

				
			

			

				

					10-18
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					cf8833的博客
				

				

					03-12
					
					2581
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
详解Angular4中路由Router类的跳转navigate

				
			

			

				

					08-30
				

			

		

		

			
				
主要介绍了详解Angular4中路由Router类的跳转navigate，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
Angular8 路由使用Router

				
			

			

				

					lvxinaidou的博客
				

				

					06-10
					
					1017
					
				

			

		

		

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



			
		

	





	

		

			

				
					
Angular 5 路由小结

				
			

			

				

					xnyssxy的博客
				

				

					03-27
					
					8161
					
				

			

		

		

			
				
首先要添加路由模块，通常定义为 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

			
		

	





	

		

			

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

				
			

			

				

					weixin_30307267的博客
				

				

					01-07
					
					1027
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					 Liradi-Birdy的博客
				

				

					01-25
					
					5539
					
				

			

		

		

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


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


ioni

			
		

	





	

		

			

				
					
angular返回上一页

				
			

			

				

					天空影
				

				

					11-15
					
					4994
					
				

			

		

		

			
				
angular.js实现返回上一页

			
		

	





	

		

			

				
					
AngularJs返回前一页面时刷新一次前面页面

				
			

			

				

					一生为追梦的博客
				

				

					01-12
					
					1万+
					
				

			

		

		

			
				
要求：
页面A进入到页面B，在页面B处理完后返回页面A，页面A里的数据应该动态的减去一条，但由于一般情况下页面是缓存起来的，返回A后读取的是缓存静态页面，里面显示的数据不会减少。应客户要求，需要重新加载一次数据，达到页面A可以刷新数据目的。
研究过程：
从网上寻找发现，有一个方法可以获取到当前页面的URL：$location
以 ‘http://localhost/$location/21

			
		

	





	

		

			

				
					
angular返回上一个页面

					
最新发布

				
			

			

				

					05-04
				

			

		

		

			
				
在 Angular 中，可以使用 `Location` 服务来实现返回上一个页面的功能。具体步骤如下：

1. 首先在组件中引入 `Location` 服务：

   ```typescript
   import { Location } from '@angular/common';
   ```

2. 在组件的构造函数中注入 `Location` 服务：

   ```typescript
   constructor(private location: Location) { }
   ```

3. 在需要返回上一个页面的地方调用 `location.back()` 方法：

   ```typescript
   goBack() {
     this.location.back();
   }
   ```

   或者在模板中绑定一个按钮或链接到 `goBack()` 方法：

   ```html
   <button (click)="goBack()">返回</button>
   ```

这样就可以在 Angular 应用中实现返回上一个页面的功能了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值