首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 9-重定向到相同的URL并刷新页面,但应仅调用当前页面API调用

Angular 9是一种流行的前端开发框架,用于构建现代化的Web应用程序。在Angular中,重定向到相同的URL并刷新页面可以通过以下步骤实现:

  1. 首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。
  2. 在你的Angular项目中,创建一个名为refresh.component.ts的新组件。这个组件将用于重定向和刷新页面。
  3. refresh.component.ts文件中,导入RouterLocation模块,并注入它们。
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-refresh',
  template: '',
})
export class RefreshComponent implements OnInit {

  constructor(private router: Router, private location: Location) { }

  ngOnInit(): void {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    const currentUrl = this.router.url;
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigate([currentUrl]);
    });
  }
}
  1. 在你的Angular项目中,创建一个名为app-routing.module.ts的路由模块(如果已经存在,请打开它)。
  2. app-routing.module.ts文件中,导入RefreshComponent并将其添加到路由配置中。
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RefreshComponent } from './refresh.component';

const routes: Routes = [
  { path: 'refresh', component: RefreshComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 现在,你可以在你的应用程序中的任何地方调用以下代码来重定向到相同的URL并刷新页面:
代码语言:txt
复制
import { Router } from '@angular/router';

constructor(private router: Router) { }

refreshPage(): void {
  this.router.navigate(['/refresh']);
}

以上代码中,refreshPage()方法将导航到/refresh路径,这将触发RefreshComponent的初始化,并执行重定向和刷新页面的逻辑。

这种方法的优势是可以在不刷新整个页面的情况下,通过重定向和刷新当前页面来调用API。这对于需要在页面上执行一些操作后更新数据的场景非常有用。

腾讯云提供了一系列与云计算相关的产品,例如云服务器、云数据库、云存储等。你可以在腾讯云官方网站上找到更多关于这些产品的详细信息和文档。

请注意,由于要求不能提及特定的云计算品牌商,因此无法提供腾讯云相关产品的链接地址。你可以自行在腾讯云官方网站上搜索相关产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue-Router学习笔记,持续记录

那解决问题思路便是在改变 url 情况下,保证页面的不刷新。...但因为没有 # 号,所以当用户刷新页面之类操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器支持,需要把所有路由都重定向页面。...区别 url 展示上,hash 模式有“#”,history 模式没有 刷新页面时,hash 模式可以正常加载到 hash 值对应页面,而 history 没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向首页路由...路由参数 当前页面的路由对象(route)参数相关API: $router.query,从 URL search 部分提取已解码查询参数字典。...单页面应用下,用户点击刷新 history模式下,路由变化会改变当前URL,正常浏览器环境下,用户刷新时,请求链接仍然是最开始请求入口链接。但是在企业微信浏览器内,则是用改变后链接去刷新

9.2K40
  • 2021前端react高频面试题汇总

    路由: 改变 url 可以通过 history.pushState 和 resplaceState 等,会将URL压入堆栈,同时能够应用 history.go() 等 API 监听 url 变化可以通过自定义事件触发实现...一个 会遍历其所有的子 元素,渲染与当前地址匹配第一个元素。...属性 to: string:重定向 URL 字符串 属性 to: object:重定向 location 对象 属性 push: bool:若为真,重定向操作将会把新地址加入到访问历史记录里面,并且无法回退到前面的页面... 使用,react-router接管了其默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...hash)跳转,此时只是链接变了,并没有刷新页面而标签就是普通超链接了,用于从当前页面跳转到href指向另一 个页面(非锚点情况)。

    5.4K00

    AngularDart4.0 英雄之旅-教程-07路由 顶

    为了满足这些要求,您将添加Angular路由器应用程序。 有关路由器更多信息,请阅读路由和导航页面。  当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...行动计划 计划如下: 将AppComponent转换为处理导航应用程序外壳程序。 将当前AppComponent中英雄相关重新定位单独HeroesComponent。 添加路由。...在路由和导航页面阅读有关默认路由和重定向更多信息。 将导航添加到dashboard  在模板上添加dashboard 导航链接,在heroes链接上方。...英雄名字将显示相同方式。 主要变化是如何得到英雄名字。...刷新浏览器开始点击。 用户可以在应用程序周围进行导航,从仪表板英雄详细信息,然后返回,从英雄列表英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。

    17.6K30

    2022前端社招React面试题 附答案

    一个 会遍历其所有的子 元素,渲染与当前地址匹配第一个元素。...属性 to: string:重定向 URL 字符串 属性 to: object:重定向 location 对象 属性 push: bool:若为真,重定向操作将会把新地址加入到访问历史记录里面,并且无法回退到前面的页面... 使用,react-router接管了其默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...hash)跳转,此时只是链接变了,并没有刷新页面而标签就是普通超链接了,用于从当前页面跳转到href指向另一 个页面(非锚点情况)。...id='1111' 可以用url,qs,querystring,浏览器提供api URLSearchParams对象或者自己封装方法去解析出id值。

    4.7K30

    hash和history路由模式

    我们熟知JS框架如react,vue,angular,ember都属于SPA 与之对应是多页面应用,他们区别如下 优点: 用户体验好、快,内容改变不需要重新加载整个页面,避免了不必要跳转和重复渲染...为了实现前端路由,SPA需要监听URL变化,据此渲染对应组件或页面不同部分,无需重新加载整个页面。下面让我们分别深入了解两种路由模式原理。...好在我们可以拦截 pushState/replaceState调用和标签点击事件来检测 URL 变化,所以监听 URL 变化可以实现,只是没有 hashchange 那么方便。...事件时,可以在event.state里获取 title:标题,基本没用,一般传 null url:设定新历史记录 url,新 url当前 url origin 必须是一样,否则会抛错,url...URL 相关 API 最早改变 URL,但不向服务器发送请求方式就是 hash。

    19910

    2021前端react高频面试题汇总

    路由: 改变 url 可以通过 history.pushState 和 resplaceState 等,会将URL压入堆栈,同时能够应用 history.go() 等 API 监听 url 变化可以通过自定义事件触发实现...一个 会遍历其所有的子 元素,渲染与当前地址匹配第一个元素。...属性 to: string:重定向 URL 字符串 属性 to: object:重定向 location 对象 属性 push: bool:若为真,重定向操作将会把新地址加入到访问历史记录里面,并且无法回退到前面的页面... 使用,react-router接管了其默认链接跳转行为,区别于传统页面跳转, “跳转”行为只会触发相匹配对应页面内容更新,而不会刷新整个页面。...hash)跳转,此时只是链接变了,并没有刷新页面而标签就是普通超链接了,用于从当前页面跳转到href指向另一 个页面(非锚点情况)。

    5K20

    前端Vue框架面试题大全

    实例已完成以下配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html页面上。mounted(载入后) 在el 被新创建 vm.el 替换,挂载到实例上去之后调用。...这两个API相同之处是都会操作浏览器历史记录,而不会引起页面刷新。不同之处在于,pushState会增加一条新历史记录,而replaceState则会替换当前历史记录。...另外,基于Hash路由不需要对服务器做改动,基于History API路由需要对服务器做一些改造,配置不同路由都返回相同页面。...最后一个*能匹配全部,然后重定向页面 ] }); history 路由和 hash 路由区别, 在浏览器有什么影响; hash前端路由,无刷新 history 会去请求接口 vue-router...因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖页面 hash 模式下, # 之前内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖

    1.9K60

    vue-router源码解读

    vue-router 解读 学习实现一版简易vue-router。 抛出问题 如何在没有vue-router等路由组件情况下开发SPA?...保证浏览器URL改变无刷新 页面内容可以根据URL路径动态渲染 提供路由相关操作API 什么是路由 简单来说,路由就是用来和后端服务器进行交互一种方式,通过不同路径,请求不同资源,请求不同页面是路由其中一种功能...history模式 由H5APIpushState和replaceState去改变url但不会刷新页面,会触发popState事件,和hash模式原理一样,只是url更加美观,少了#,但是当用户刷新页面时...,浏览器会向服务端发送请求,所以需要后端配置所有页面重定向页面。...重定向和别名 区分hash和history模式? 实现router-view和router-link组件? 为所有组件提供$route即当前路由信息和$router即操作路由方法。

    1.2K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面中,您将进行以下改进。 从服务器获取英雄数据。 让用户添加,编辑和删除英雄名字。 将更改保存到服务器。 您将教会应用程序对远程服务器Web API进行相应HTTP调用。...模拟Web API 在你有一个可以处理英雄数据请求Web服务器之前,HTTP客户端将从模拟服务(内存中Web API)中获取保存数据。...刷新浏览器尝试新删除功能。...http.get()调用类似于HeroService中调用,尽管URL现在有一个查询字符串。...distinct()确保当过滤器文本发生更改时才发送请求。 transform(switchMap(...))为通过debounce()和distinct()创建每个搜索项调用搜索服务。

    11K30

    2020vue面试题及答案_人际关系面试题及答案

    DOM 2、旧虚拟DOM中未找到与新虚拟DOM相同key 创建新真实DOM,随后渲染页面 3、用index作为key可能会引发问题: 1、若对数据进行:逆序添加、...使用 URL hash 来模拟一个完整 URL,于是当 URL 改变时,页面不会重新加载。...会给用户好像跳转了网页一样感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) history 模式 工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面...其实一共有五种模式可以实现改变URL, 而不刷新页面....,但是刷新了页⾯;使⽤history.pushState(/url),⽆刷新页⾯,静态跳转;引进router,然后使⽤router.push(/url)来跳转,使⽤了diff算法,实现了按需加载,减少了

    8.7K20

    从0开始构建一个Oauth2Server服务 单页应用

    redirect_uri(可选) redirect_uri在规范中是可选,但某些服务需要它。这是您希望在授权完成后将用户重定向 URL。这必须与您之前在服务中注册重定向 URL 相匹配。...这可能用于指示授权完成后在应用程序中执行操作,例如,指示在授权后重定向应用程序哪些页面。这也作为 CSRF 保护机制。 请注意,不使用客户端密码意味着使用状态参数对于单页应用程序更为重要。...用户被带到服务看到请求后,他们将允许或拒绝该请求。如果他们允许请求,他们将被重定向回指定重定向 URL 以及查询字符串中授权代码。然后,应用程序需要将此授权码交换为访问令牌。...您应用应该将状态与其在初始请求中创建状态进行比较。这有助于确保您只交换您请求授权码,防止者使用任意或窃取授权码重定向回调 URL。...redirect_uri(可选) 如果重定向 URL 包含在初始授权请求中,则它也必须包含在令牌请求中,并且必须相同。有些服务支持注册多个重定向 URL,有些服务需要在每个请求中指定重定向 URL

    21330

    Angular路由实现原理

    去改变当前页面URL, 同时,利用点击事件 结合 window.onpopstate监听事件触发页面的更新渲染逻辑。此外History API实现服务器通常需要做一些配置。...这个页面用户点击了页面刷新,就会找不到页面。...劣势:客户端刷新时,会把 SPA 路由误当作 资源请求链接,所以需要配置 web 服务器以处理这些 “路由形式URL” 以统一放回入口 index.html 文件。...通常为了让服务器区分这些 “路由形式URL”, 所以通常需要用一些前缀以区分和普通 请求区别,如 /api/*通过这种方式实现时,定义路由时候需要特别注意, 因为不当链接跳转可能会导致全页面重载...Angular路由实现已经了解了基本原理,那么Angular路由又是怎么实现呢。我github上下载了angular路由实现源码。

    79610

    教程|在 Angular 4 中加载功能模块(上)

    请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发开发人员。 Angular功能模块 单页 Web 应用程序在启动时呈现一个 HTML 页面。...当用户导航这些辅助模块中某个模块时,就会加载该模块准备就绪。 出于本教程目的,假设应用程序用户最感兴趣是获取有关金融市场和体育项目的更新。您首先要加载这些模块,随后加载货币和天气模块。...前提条件 要掌握本教程,需要在开发机器上安装两个工具: Node Angular CLI 输入命令 ng -v,以便找到您当前使用 Angular CLI 和 Node 版本。...应用程序运行在端口 4200 ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。打开 Chrome 浏览器输入 URL http://localhost:4200。...如果未指定路径,数组中第一项会重定向 /markets 路径。 要确认目前实现应用程序功能,可在浏览器中返回到 http://localhost:4200。

    2.2K10

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    我们可以利用路由服务定义这样一种东西:对于浏览器所指向特定URLAngular将会加载显示一个模板,实例化一个控制器来为模板提供内容。         ...暴露当前地址栏URL,这样你就能         * 获取监听URL。         * 改变URL。     ...path( ):读、写;当没有任何参数时,返回当前url路径;当带有参数时,改变路径,返回$location。...search( ):读、写;当不带参数调用时候,以对象形式返回当前url搜索部分。     url( ):读、写;当不带参数时,返回url;当带有参数时,返回$location。...1.7.4 代码示例         $location服务用于返回当前页面URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller

    42140

    Angular v18 现已推出!

    '); handleClick() { this.name.set('Zoneless Angular'); }}在上面的示例中,单击按钮将调用该方法,该方法将更新信号值更新 UI。...Zone.js拦截了许多浏览器调用,以插入 Angular 更改检测。...Angular.dev 主页现在,所有对 angular.io 请求都会自动重定向 angular.dev。为确保所有现有链接继续有效,我们将开发人员转发给 v17.angular.io。...在过去 6 个月中,我们从人们那里收集了更多反馈,完善了更新体验,使每个人都能够迁移到新构建体验获得编辑/刷新提升。您可以在我们更新指南中找到我们开发工具,以自动执行更新体验。...例如,如果要重定向依赖于某些运行时状态路由,则可以在函数中实现更复杂逻辑:const routes: Routes = [ { path: "first-component", component

    23510

    前端知识点总结vue篇(下)

    数据绑定viewmodel层自动渲染 页面中,视图变化通知viewmodel层更新数据。 4. vue常用一些指令 v-if:根据表达式真假条件渲染元素。...,做 刷新操作会出现404错误,需要和后端配合配置一下Apache或是nginx重定向重定向路由首页) abstract模式: 支持所有的JS运行环境。...如果发现没有浏览器API,路由会自动强制进入这个模式。 Hash和history区别 HashURL会更改、浏览器可以前进和后退,但浏览器不会刷新并且不会和服务端交流。...id=1,刷新页面id还存在。 params类似post,跳转之后url后面不会拼接参数,但是刷新页面id会消失。...q=params&spm=1001.2101.3001.7020) 在刷新页面的时候参数会消失 可以考虑本地存储解决此问题 4.query传过来参数会显示地址栏中 而params传过来参数不会显示地址栏中

    34820

    Angular2学习记录-给后端程序员经验分享

    1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习基石,学习东西都尽可能在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后维护.那么就要学习...,self并不受angular管理,导致刷新变量是self中isBackColor. 3.2http参数传递 按照下面代码传参数应该是没有问题,但是我遇到了url被编码问题,例如输入`1111@qq.com...,在children中发现被重定向/index,那么回到根路由,找到IndexComponent完成任务....,该方法检测到组件输入属性发生变化时调用,也就是存在@input装饰属性,该属性每次变化时会调该方法. 3.8部署问题 单页应用部署服务器上可能会出现访问www.domain.xx可以访问,并且点击什么都能成功...index.html index.htm; } 解决方法: 解决方法就是让其对于路由都去加载index.html这个文件.使用try_files指令,该指令会把uri当成一个文件,去根目录下寻找,找不到的话则内部重定向配置

    3.1K20

    前端程序员必知:单页面应用核心

    从过去 jQuery Mobie、Backbone 今天 Angular 2、React、Vue 2,除了版本号不同,他们还有很多相同之处。 刚开始写商业代码时候,我使用是 jQuery。...然而早期受限于移动浏览器性能影响,只能从服务器获取相应 HTML,替换当前页面。...在这样应用中,我们可以看到单页面应用基本元素: 页面路由,通过某种方式,如 URL hash 来说明表明当前所在页面拥有从一个页面跳转到另外一个页面的入口。 ?...并且同时在不同前端框架上,他们在行为上还有一些区别。这取决于我们是否需要后台渲染,即刷新当前页面表现形式。 使用 Hash (#)或者 Hash Bang (#!) 形式。...当用户刷新页面的时候,请通过新 URL 来向服务器请求内容。 幸运是,大部分最新 Router 组件都会判断是否支持 history API,再来决定先用哪一个方案。

    1.5K90
    领券