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

在angular 2中如何在成功消息后刷新页面

在Angular 2中,可以通过以下步骤在成功消息后刷新页面:

  1. 首先,确保你已经安装了Angular的HttpClient模块。如果没有安装,可以通过以下命令进行安装:
代码语言:txt
复制
npm install @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest --save
  1. 在你的组件中,导入RouterActivatedRoute模块:
代码语言:typescript
复制
import { Router, ActivatedRoute } from '@angular/router';
  1. 在组件的构造函数中注入RouterActivatedRoute
代码语言:typescript
复制
constructor(private router: Router, private route: ActivatedRoute) { }
  1. 在成功消息后,使用RouternavigateByUrl方法来刷新页面。你可以在subscribe方法中调用该方法,以便在异步操作完成后执行刷新操作。例如:
代码语言:typescript
复制
this.yourService.yourMethod().subscribe(
  response => {
    // 处理成功消息
    // 刷新页面
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigate([this.route.snapshot.url.join('/')]);
    });
  },
  error => {
    // 处理错误消息
  }
);

在上述代码中,this.yourService.yourMethod()是一个示例的异步方法,你需要将其替换为你实际的方法名。this.router.navigateByUrl('/')用于导航到根路径,{ skipLocationChange: true }参数用于跳过URL的更改,然后使用this.router.navigate([this.route.snapshot.url.join('/')])重新导航到当前页面。

这样,在成功消息后,页面将会被刷新。

请注意,以上代码中没有提及腾讯云相关产品和产品介绍链接地址,因为在这个特定的问题中没有与腾讯云相关的内容。如果你有其他关于腾讯云的问题,我将很乐意为你提供相关信息。

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

相关·内容

Angular开发实践(二):HRM运行机制

引言 angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。...我们先看看具体的效果: 1、启动angular-start项目,控制台你可以看到HRM已经启用的消息: ? image 2、然后通过浏览器控制台可以看到,第一次加载请求了所有的资源: ?...image 3、此时,修改一处代码保存,浏览器并未刷新就自动显示修改之后的效果,再看浏览器控制台只请求了新修改的js: ?...类似的,当在一个模块中实现了HMR接口,你可以描述出当模块被更新发生了什么。然而在多数情况下,不需要强制每个模块中写入HMR代码。如果一个模块没HMR处理函数,更新就会冒泡。

1.7K70

AngularDart4.0 指南- 表单 顶

但是,此页面重点介绍模板驱动的表单。 您可以使用Angular模板 构建几乎任何表单- 登录表单,联系表单和几乎任何业务表单。...您在内部维护该列表(HeroFormComponent中)。 您将在表单中添加一个select,并使用ngFor(先前“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...某个时候,它可能看起来像这样: ? 诊断结果表明数值确实是从输入流向模型,再返回。 这是双向的数据绑定。 有关更多信息,请参见模板语法页面上的与NgModel的双向绑定。...如果您忽略原始状态,则只有该值有效时才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...用ngSubmit提交表单 用户应该能够填写表单提交这个表单。表单底部的Submit按钮本身不做任何事情,但是由于它的类型(type =“submit”),它会触发一个表单提交。

17.4K30

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

模块热拔插:开发期间,一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源,你的改变也将在不刷新页面的情况下立即推送到浏览器。...然后,VS犯了个错,事实上是因为一个只macos上的可选依赖没有安装成功,你可以选择视而不见,但是如果你是个强迫症患者,那么看这里,追随大神的脚步,去解决掉它。...刷新页面,你会发现一切看起来和之前一样,左边的tab还是可以工作,但是一些依赖javascript的内容就不再可以运行了,比如counter。 服务器端预加载的意义何在?...模块热拔插(HMR) 在有任何代码修改之后,通常我们需要刷新页面来应用这些修改,但是这对于效率和调试方便性来说是很不友好的。...,你的应用程序将会在不刷新页面的情况下啊立即应用改变。

3.3K60

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

需求频繁变更的项目: 双向数据绑定和组件化开发风格使得Angular需要频繁变更的项目中表现出色。修改数据模型,视图会自动更新,降低了手动DOM操作的工作量。...通过这些步骤,就成功地创建了一个简单的 ASP.NET Core 项目,并且可以本地运行它。可以根据需要进一步项目中添加功能和内容。...安装完成,可以项目中使用这些框架和工具来开发前端应用。...SignalRService: 组件中使用 SignalRService 来发送消息。...在前端框架中接收 SignalR 消息 无论是 Angular、React 还是 Vue 中,你可以通过订阅 SignalR 事件来接收来自服务器的消息,并在 UI 中进行处理。

5800

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地列表下方显示一条消息。...有关更多信息,请参阅模板语法页面。 注意ngFor指令中的hero变量; 它是模板输入变量的一个例子。 “模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。...刷新浏览器。...有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示和隐藏消息。 它正在添加和删除DOM中的段落元素。...浏览器应该自动刷新消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。

5.3K10

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

本教程将介绍如何在 Angular 中开发和加载功能模块。尽管对于较小的应用程序,根模块就足够用了,但对于更大更复杂的应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。 Angular 中的功能模块 单页 Web 应用程序启动时仅呈现一个 HTML 页面。...除了该 HTML 页面之外,服务器还会向客户端发送一个应用程序引擎。该引擎会控制整个应用程序,包括处理和加载 HTML 页面。...加载技术 有效的加载策略是开发一个单页应用程序成功的关键。对于示例应用程序,将结合使用 3 种常见的加载技术来实现一种混合加载策略: 贪婪加载:贪婪加载场景中,所有模块和功能都在应用程序启动时加载。...您会看到应用程序默认端口 4200 中成功运行,以及一条与此消息类似的消息: 图 1. 应用程序运行在端口 4200 ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。

2.2K10

反思录:Angular实现svg和png图片下载

接下来要解决的就是如何在component中引用页面上的svg元素并将它转化成png格式的图片。 svg和png图片转换和下载 1....获取元素 Angular中提供一种叫做ViewChild的注解,可以帮助我们引用到页面中的svg元素,此处就是#template....解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新的,Angular的Change detection需要时间完成刷新,所以有很短时间的延迟[2]。...紧接着,我toBlob方法插入了console.log(this.sanitizer),运行打印的结果是undefined。这能说明什么?程序执行到这里了?...然后,我开始思考“难道我写的Angular的注入方式不对?”,遍寻Angular的官方文档和样例之后,我确信注入方式没有问题。

2.7K40

何在Angular项目中使用MQTT

本文将介绍如何在 Angular 项目中使用 MQTT 协议,实现客户端与 MQTT 服务器的连接、订阅、收发消息、取消订阅等功能。...unsubscribe() this.subscribeSuccess = false}消息发布unsafePublish发布带有可选选项的主题的消息 QoS、Retain 等选项,如下所示。...图片在 MQTT X 发送第二条消息之前,浏览器端进行取消订阅操作,浏览器端将不会收到 MQTT X 发送的后续消息。...总结综上所述,我们实现了 Angular 项目中创建 MQTT 连接,模拟了客户端与 MQTT 服务器进行订阅、收发消息、取消订阅以及断开连接的场景。...Angular 作为三大主流的前端框架之一,既能够浏览器端使用,也能够移动端使用,结合 MQTT 协议及 MQTT 物联网云服务 可以开发出很多有趣的应用,比如客服聊天系统或实时监控物联网设备信息的管理系统等

2.4K40

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

themeKey: 'MLHSalesApiClientThemeKeyForDevelopment' }; authority就是authorization server的地址. redirect_url是登陆成功跳转回来的地址...所以我几乎最外层添加了这个authguard, 里面的代码是: import { Injectable } from '@angular/core'; import { CanActivate } from...您可以单独建立一个简单的页面就像官方文档那样, 然后再跳转到angular5项目里面. 这个页面一闪而过: ? 回到angular5项目就可以正常访问api了....自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后iframe里面操作....不过还是需要建立一个页面, 用于刷新: <!

5.6K50

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

$apply()方法可以angular框架之外执行angular JS的表达式,例如:DOM事件、setTimeout、XHR或其他第三方的库。...post请求时使用,作为消息体发送到服务器     headers: 一个列表,每个元素都是一个函数,返回http头     xsrfHeaderName(字符串):保存XSFR令牌的http头的名称...replace( ):如果被调用,就会用改变的URL直接替换浏览器中的历史记录,而不是历史记录中新建一条信息,这样可以阻止『后退』。     ...1.7.4 代码示例         $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

37140

【Hybrid开发高级系列】AngularJS(三)——开发实践

当选中了’generator-angular,按下回车执行安装,它所依赖的Node包就会开始被下载了。         ...中实现返回前一页 http://blog.csdn.net/qianqianyixiao1/article/details/51146519 AngularJs返回前一页面刷新一次前面页面 http:.../mpIndex.html'     };     assetObj.reloadAssetData = function(callback, callbackError){         //数值页面失去焦点被释放了...回退到页面页面事件响应失效问题     问题:         从购买页面做重定向到登录页,再从登录页登录成功回到购买页面,购买页面的事件响应失效。     ...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

23420

Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

比如我发现了一个严重的问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。这个问题后来采用了它的动态加载方式才得以解决。   经过对比,比较,我最后选择的就是多说。 C....因此多次调试没有解决问题,我选择了放弃。 2. 如何在Angular JS中正确使用评论插件?...标准代码中,有一个通用的Javascript方法,如果我有多个页面,那么这段代码就需要复制多次。...但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,每个页面引用即可。...解决问题过程中,也可以加深对Angular JS的理解。   希望对你有帮助。谢谢。

1.9K80

使用angular4和asp.net core 2 web api做个练习项目(三)

, 所以angular项目里面无需登录页面, 把login相关的文件删除..............this.manager.signoutRedirect(); } } config是针对identity server 4服务器的配置, authorization server的地址是 http://localhost:5000, 登陆成功跳转后来的地址是...component, 都会在登录用户变化时(登录/退出)触发component里面自定义的事件. logout()是退出, 调用方法也会跳转到authorization server的页面....最后别忘了app.module里面注册: providers: [ ClientService, AuthService ], 登陆成功跳转回掉页面  建立一个跳转回掉的component...然后输入用户名密码登陆. 3.同意授权 点击yes 同意授权. 4.跳转回angular页面: 首先跳转回的是angular的login-callback路由, 然后瞬间回到了主页: 5.

1.3K80

Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

比如我发现了一个严重的问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。这个问题后来采用了它的动态加载方式才得以解决。     经过对比,比较,我最后选择的就是多说。 C....因此多次调试没有解决问题,我选择了放弃。 2. 如何在Angular JS中正确使用评论插件?...标准代码中,有一个通用的Javascript方法,如果我有多个页面,那么这段代码就需要复制多次。...但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,每个页面引用即可。...解决问题过程中,也可以加深对Angular JS的理解。   希望对你有帮助。谢谢。

1.6K00
领券