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

在angular 8上,刷新页面不会显示来自后端api的数据

在Angular 8上,刷新页面不会显示来自后端API的数据的原因是因为Angular是一个单页应用(Single Page Application,SPA)框架,它使用了前端路由来实现页面的切换和导航。当你刷新页面时,浏览器会发送一个新的HTTP请求到服务器,但是Angular的路由系统会拦截这个请求并尝试在前端进行页面的切换,而不会重新向后端API请求数据。

要解决这个问题,你可以使用Angular的路由守卫(Route Guard)来处理页面刷新时的数据加载。路由守卫可以在路由切换之前执行一些逻辑,例如从后端API获取数据并将其传递给组件。

以下是一种可能的解决方案:

  1. 创建一个路由守卫服务(例如DataResolverService),实现CanActivate接口。
  2. 在该服务中,使用HttpClient模块发送HTTP请求到后端API获取数据。
  3. 在路由守卫的resolve方法中,订阅HTTP请求的响应,并将数据传递给组件。
  4. 在路由配置中,将该路由守卫服务与需要加载数据的组件关联起来。

示例代码如下:

代码语言:txt
复制
// data-resolver.service.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataResolverService implements Resolve<any> {
  constructor(private http: HttpClient) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    // 发送HTTP请求到后端API获取数据
    return this.http.get('your-backend-api-url');
  }
}
代码语言:txt
复制
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourComponent } from './your-component.component';
import { DataResolverService } from './data-resolver.service';

const routes: Routes = [
  {
    path: 'your-path',
    component: YourComponent,
    resolve: {
      data: DataResolverService, // 使用路由守卫服务加载数据
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
代码语言:txt
复制
// your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
})
export class YourComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 从路由守卫的resolve中获取数据
    this.data = this.route.snapshot.data['data'];
  }
}

这样,当你刷新页面时,Angular会自动调用路由守卫服务的resolve方法来加载数据,并将其传递给组件。你可以在组件的OnInit生命周期钩子中访问这些数据,并在模板中进行展示。

对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议你参考腾讯云的官方文档和产品页面,以获取相关信息。

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

相关·内容

浅谈移动端页面刷新跳转问题解决方案

JavaScript控制相关视图显示和隐藏,这种模式可以让用户Web App感受Native App速度和流畅。...4.容易借助其他知名平台更有利于营销和推广 5:前后端职责分离,架构清晰:前端进行交互逻辑,后端负责数据处理。传输数据少,减少后端压力,前后端单独开发、单独测试。......重点说其中两个新增APIhistory.pushState和history.replaceState相同之处是两个 API 都会操作浏览器历史记录,而不会引起页面刷新。...这种方式优点是刷新要更轻量,js库和css样式首次加载即可,局部页面可以只加载少量数据,并且基于div响应式效果在移动端要更好。...因此这也成了目前流行前端框架angular、react等选用方案。通过HTML5 History API,实现页面跳转,实现简单页面web应用。

3.6K40

hash和history路由模式

前端路由是指在浏览器端控制页面内容切换显示机制。没有服务器端参与情况下,前端路由可以根据URL变化,对应展现不同内容,实现页面的“伪”跳转。...其实就是说,我们点击页面一些东西,并没有真正发送请求进行页面跳转,而是组件之间切换而已,仅仅刷新局部资源。...基于上面一点,SPA 相对对服务器压力小 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理 缺点 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript...、CSS 统一加载,部分页面按需加载 SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以 SEO 其有着天然弱势。...History模式原理: History API 允许SPA浏览历史记录中添加、修改记录而不会触发页面加载。

12210

从Vue.js窥探前端行业

2.前端交互越来越多,功能越来越复杂: 现在前端可谓是包罗万象,比如高大技术库和框架、酷炫运营活动页面、H5小游戏,当然前端技术应用在更多具有商业价值应用上,比如下图。 ?...3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 传统MVC下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差用户体验。...因此我们通过Ajax方式和后端REST API作通讯,异步刷新页面的某个区块,来优化和提升体验,同时把MVC拿到前端来做 MVVM框架 1.MVVM框架基本概念:它主要包括各部分View、ViewModel...所以MVVM框架好处显而易见:当前端对数据进行操作时候,可以通过Ajax请求对数据持久化,而不必刷新整个页面,只需改变dom里需要改变那部分数据内容。特别是移动端,刷新页面的代价太昂贵。...由此在这基础诞生了很多MVVM框架,比如Angular.js、react.js、vue.js。

1.7K80

选择大于努力,你必须了解web1.0到web2.0三段历史

这就是后端MVC模式盛行,让我们可以模板里写上要展现数据。以前代码都是所有内容写在一起,现在就会用Model负责数据后端渲染页面之前,会把数据数据显示在前端。...动态页面使得前端本身丰富程度大大提升。这一下子迎来了整个互联网开发繁荣时期,但这种模式下任何数据更新,都需要刷新整个页面,并且带宽不足年代,这样做会耗费不少加载网页时间。...所以这个时代网页主要还是以显示数据和简单特效为主,比如当时众多门户网站,也都没有太多用户交互,主要就是显示后端存储新闻。...Ajax这个技术让我们可以异步获取数据并且刷新页面,从此前端不再受限于后端模板,这也宣告了Web2.0时代正式到来。至此,前端工程师也正式作为一个独立工种出现。...各大框架在这个步骤,各显神通: Angular1就是最老套脏检查。所谓脏检查,指的是Angular1在对数据变化检查,遵循每次用户交互时都检查一次数据是否变化,有变化就去更新DOM这一方法。

1.2K10

一文搞懂前端路由原理(Vue、React、Angular

路由概念起源于服务端,以前前后端不分离时候,由后端来控制路由,当接收到客户端发来 HTTP 请求,就会根据所请求相应 URL,来找到相应映射函数,然后执行该函数,并将函数返回值发送给客户端...然后根据这些读取数据服务器端就使用相应模板来对页面进行渲染后,再返回渲染完毕页面。...对于前端路由来说,路由映射函数通常是进行一些 DOM 显示和隐藏操作。这样,当访问不同路径时候,会显示不同页面组件。...其中做最主要 API 有以下两个:history.pushState() 和 history.repalceState()。这两个 API可以不进行刷新情况下,操作浏览器历史纪录。...popstate 事件来监听 url 变化; history.pushState() 或 history.replaceState() 不会触发 popstate 事件,这时我们需要手动触发页面渲染

92620

分享下 Backbone、Vue、Angular、React 项目使用经验

每当新加一个状态,便需要使用 Java 修改 ModelAndView,并启用一个新 API,这个时候即要修改前端框架,又要修改大量后台测试。 除了此, 我们还需要考虑到,用户刷新页面的情况。...当用户由在产品详情页,刷新页面时,我们需要将一些数据,通过 URL hash 传递到后台,然后解析 blabla。等这些完了,还要考虑将这个状态再传到前端。...我们是 React 初期采用这个框架,所以操作起来并不会像今天这么顺利。我们实现原型系统时候,需要自己去实现一个又一个组件。...不过,这个框架当时主要是用在桌面端版本,后来进行响应式设计便也用到了移动应用上。 再说说前后端渲染 React 同构,能解决前后端渲染带来问题。...而 Angular 2.x beta.5 作死 API 大改,也导致了一部分用户离开,好在最后 Angular 2.x 活了过来。 场景四:Vue 快速上线 ?

2.2K60

后端程序员Angular快速指南|TW洞见

在我看来主要有如下几个特征: 客户端渲染 与传统借助后端生成新页面的方式不同,前端程序借助浏览器API来呈现内容(也就是“渲染”)并处理用户动作,在这个过程中,并不需要借助服务端运算能力,也不需要网络...因为不需要再由服务器发回新页面,所以前端程序在理论就具备了独自渲染内容并全权处理用户交互能力,只必要时,才会通过Web API寻求服务器帮助。...当然,某种意义,这不应该算作Angular问题,而是JS“原罪”。...但是ES6基础,TS增加了可选类型系统以及未来ES8中才会出现装饰器等特性。 你想知道TS为什么这么牛?...因为未来前端开发,即使纯逻辑类代码复杂度上都可能会赶上后端1.x时代,Angular就以其优秀“可测试性”而著称了,Angular 2当然不会放弃这个传统优势。

1.8K100

给Java程序员Angular快速指南 | 洞见

相对于 Java 8 Stream,RxJS 比较特别的一点是它完全屏蔽了同步和异步之间差异。也就是说,其中 operator 不知道也不需要关心这个数据是同步传过来还是异步传过来。...只要你遵循一些显而易见原则,你就可以一直用同步方式给数据,之后即使要突然改成异步,原有的代码也不会被破坏。 事实,我 Angular 开发中经常利用这种特性来加速开发。...参见: https://angular.cn/guide/ngmodules 路由 传统路由功能完全是由后端提供,但是页面应用中,页面中点击 URL 时,将会首先被前端程序拦截,如果前端程序能处理这个...Angular 表单提供了不同层级抽象,让你可以开发中轻松分离开显示、校验、报错等不同关注点。...安全 Angular 中,你不会无意间造成安全隐患。

2.3K41

Angular(06)- 为什么数据变化,绑定视图就会自动更新了?

以下是我个人理解,仅供参考: 还是 jQuery 时代,当在 js 中改变了某个变量数据,而这个变量是需要在 Html 中显示出来。...那么,这个时候,我们做法也就是通过 DOM 先获取到显示该变量视图元素,然后借助 DOM API 来更新这个视图元素,是吧。这是原始方式。...验证 Angular 这种原理猜测很简单,你页面上某个元素绑定个方法,方法内打个日志,然后你滑动下页面试试看,看看日志是不是一直输出。...方式,来监听数据变化时机; angular 则是会触发视图变化情况下,主动去检测绑定数据源,比对下是否有发生变化来判断是否需要刷新视图。...原理跟 Android 屏幕刷新机制很像,就都是以一个固定频率来刷新页面每个帧信号之间,只是收集发生变化视图,或者说,只更新虚拟 DOM,并不会去更新真实页面

1.7K10

【无标题】

API来返回数据(json,xml),前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中,这样做最大优点就是前后端责任清晰, 后端专注于数据, 前端专注于交互和可视化,...页面应用阶段,SPA最主要特点就是在前后端分离基础加了一层前端路由,也就是前端来维护一套路由规则。那么前端路由核心是什么呢?改变URL,但是页面不进行整体刷新。...页面中展示不同组件。...vue-router是基于路由和组件,路由用于设定访问路径, 将路径和组件映射起来。vue-router页面应用中, 页面的路径改变就是组件切换,让构建单页面应用更简单。...这个#实际叫做哈希路由。 编写好注册好组件以后,应该怎么显示呢?我们需要使用显示路由组件标签。 <!

1.2K20

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

会给用户好像跳转了网页一样感觉, 但是实际没有跳转 主要用在单页面应用(SPA) history 模式 工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面...优点:轻量级框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据和结构分离、运行速度快、插件化 缺点:不支持ie8以下、社区没有angular和react丰富、缺乏高阶教程和文档...,进而实现显示或隐藏元素,v-show通过设置dom元素display来实现显示或隐藏操作,并不会删除dom v-if隐藏会将组件销毁,显示时会将其内部监听事件重建,v-show只是设置display...⾥⾯数据params刷新会丢失params⾥⾯数据49、vue mock数据 项⽬中尝试了mockjs,mock数据,实现前后端分离开发。...总结:在后端接⼝没有开发完成之前,前端可以⽤已有的接⼝⽂档,真实请求拦截ajax,并根据mockjsmock数据规则,模拟真实接⼝返回数据,并将随机模拟数据返回参与相应数据交互处理,这样真正实现了前后台分离开发

8.7K20

使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

这是后端代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerplate 这里面有几个dbcontext, 需要分别对Identity...我使用angular 5: 由于这个代码是公司项目, 后端处于早期阶段, 被我开源了, 没什么问题....您可以单独建立一个简单页面就像官方文档那样, 然后再跳转到angular5项目里面. 这个页面一闪而过: ? 回到angular5项目后就可以正常访问api了....自动刷新Token: oidc-client自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新时候, 它好像是会在页面上弄一个iframe, 然后iframe里面操作....不过还是需要建立一个页面, 用于刷新: <!

5.6K50

前端开发:vue路由之前端路由原理

页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。...前端三驾马车Angular,Vue,React均基于此模型来运行。SPA能够以模拟多页面应用效果,归功于其前端路由机制。...两种实现方式 1、hash模式 这里hash是指url尾巴后#号及后面的字符。这里#和css里#是一个意思。hash也称作锚点,本身是用来做页面定位,她可以使对应id元素显示可是区域内。...下面先看api window.history.pushState(state, title, url) // state:需要保存数据,这个数据触发popstate事件时,可以event.state...其次,hash 传参是基于 url ,如果要传递复杂数据,会有体积限制,而 history 模式不仅可以url里放参数,还可以将数据存放在一个特定对象中。

95751

学习 Vue 3 全家桶 - vue-router

前端依赖后端,并且前端不需要负责路由这种开发方式: 优点 开发速度会很快 后端也可以承担部分前端任务等 缺点 前后端项目无法分离 页面跳转由于需要重新刷新整个页面、等待时间较长等等,交互体验下降...通过 JavaScript 动态控制数据去提高用户体验方式并不新奇,Ajax 让数据获取不需要刷新页面,SPA 应用让路由跳转也不需要刷新页面。...解决这一问题思路便是改变 URL 情况下,保证页面的不刷新。...,URL hash 中 # 就是类似于下面代码中这种 # : http://cellinlab.xyz/#/login 进行页面跳转操作时,hash 值变化并不会导致浏览器页面刷新,只是会触发...通过这两个 API ,可以改变 URL 地址,并且浏览器不会后端发送请求,同时还会触发 popstate 事件。 通过这两个 API 和 popstate 事件,就能用另外一种方式实现前端路由。

37410

AngularJS - 入门小Demo

AngularJS四大特效 MVC模式、模块化设计、自动化双向数据绑定、依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发一些思想,虽然身为前端框架,但与jQuery...双击打开这个html文件,会发现页面显示是200,如果不加载ng-app指令,页面显示则是{% raw %}{{100+100}}{% endraw %}。..."> {{name}} 通过ng-init指令来对变量进行初始化,比如上边html页面,在打开或刷新后,name变量值会被初始化为JOJO。...Demo8 - 内置服务$http 前端数据一般从后端获得,我们一般使用AngularJS内置服务$http来获取后端数据,下边demo需要在容器中运行(比如Tomcat)。...可以通过mvn tomcat7:run来启动该web项目(或者双击源码里start.bat来启动项目),接着浏览器地址栏输入localhost:8080/demo-8.html,即可得到该JSON数据

5.1K10

Angular 显示英雄列表

页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...Angular 会把所点击   hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义那个。...英雄们显示列表中,并且所点英雄详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4K30

【ASP.NET Core 基础知识】--前端开发--集成前端框架

后端分离应用: Angular后端通过RESTful API等方式进行通信,适用于前后端分离应用架构。它可以与各种后端技术(如ASP.NET Core、Node.js等)无缝集成。...页面 await next(); } }); 处理路由冲突 当使用 Angular 路由时,需要确保前端路由和后端路由不会发生冲突。...("/index.html"); // 处理前端路由路由 }); 通过这种方式,前端路由和后端路由可以很好地整合在一起,并且应用程序中正常工作,而不会发生冲突。...: ASP.NET Core 项目中配置默认页面,以便在应用程序任何路径都提供前端路由。...$mount('#app'); 配置前端路由默认页面 ASP.NET Core 项目中配置默认页面,以便在应用程序任何路径都提供前端路由。

4700

第217天:深入理解Angular双向数据绑定原理

而将数据显示页面上,并且有一定交互效果(比如点击等用户操作及对应页面反应)则是js主要完成工作。...很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载方式进行更新页面(post请求)。...如果能在开始时候,便已经确定好从后端获取数据页面上需要进行操作,当数据发生改变,页面的相关内容也自动发生变化,这样便能极大地方便前端工程师开发。...ng-bind:将angular变量显示页面中。...{{}}:与ng-bind功能相同,区别在于页面未完全渲染完之前模板语言会直接显示页面中,可通过html标签中加上ng-cloak解决这一问题。

3.6K20

day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表实现 + 品牌列表分页实现 + 增加修改删除品牌实现 + 品牌分页条件查询实现_用心笔记

1.2.3 依赖注入 依赖注入(Dependency Injection,简称DI)是一种设计模式,指某个对象依赖其他对象无需手工创建,只需要“吼一嗓子”,则此对象创建时,其依赖对象由框架来自动创建并注入进来...ng-model 指令用于绑定变量,这样用户文本框输入内容会绑定到变量,而表达式可以实时地输出变量。...1.3.8 内置服务 我们数据一般都是从后端获取,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。 <!...品牌列表分页实现 3.1 需求分析 品牌管理下方放置分页栏,实现品牌分页功能 ? 3.2 后端代码 后端给前端数据有:     1)total:总记录数。     ...2)rows:每页要显示记录数。 注意:此处rows与rows含义区别。 3.3.1 HTML brand.html引入分页组件     <!

8.9K64

Angular 显示英雄列表

页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...Angular 会把所点击   hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义那个。...英雄们显示列表中,并且所点英雄详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4.4K70
领券