开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在angular 6中，表单在I do (ngSubmit)之后不会刷新

在Angular 6中，表单在I do (ngSubmit)之后不会刷新的原因是因为默认情况下，ngSubmit事件会触发表单的提交动作，但不会导致页面刷新。这是因为Angular采用了单页应用（SPA）的架构，通过使用Ajax技术实现页面的局部刷新，提高了用户体验和性能。

要解决表单提交后不刷新的问题，可以采取以下几种方法：

使用Router导航：在表单提交成功后，通过Router导航到另一个组件或当前组件的刷新路由，以实现页面的刷新。
使用location.reload()方法：在表单提交成功后，可以使用JavaScript的location.reload()方法来刷新整个页面。
使用ngIf指令：在表单组件的父组件中添加一个ngIf指令，将表单组件包裹在其中。在表单提交成功后，通过改变ngIf的值来重新渲染表单组件，从而实现刷新效果。
使用Angular的ChangeDetectorRef服务：在表单提交成功后，可以使用ChangeDetectorRef服务来手动触发变更检测，从而实现页面的刷新。

需要注意的是，以上方法都是通用的解决方案，不仅适用于Angular 6，也适用于其他版本的Angular。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云CDN加速服务。腾讯云云服务器提供稳定可靠的云计算基础设施，可用于部署和运行Angular应用程序。腾讯云CDN加速服务可以加速静态资源的传输，提高页面加载速度，提供更好的用户体验。

腾讯云云服务器产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云CDN加速服务产品介绍链接：https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart4.0 指南- 表单顶

你还没有使用Angular。没有绑定或额外的指令，只是布局。在模板驱动的表单中，如果已经导入了angular_forms库，则不必为了使用库功能而对标记执行任何操作。...为了达到这个效果，在Name 之后立即添加下面的： lib/src/hero_form_component.html (hidden error message) <div [hidden...用ngSubmit提交表单用户应该能够在填写表单后提交这个表单。表单底部的Submit按钮本身不做任何事情，但是由于它的类型（type =“submit”），它会触发一个表单提交。...如果没有Angular的帮助，你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性？对你来说，这很简单：在（增强的）表单元素上定义一个模板引用变量。在多处的按钮中引用该变量。...当您单击编辑按钮时，该表消失，并且可编辑的表单重新出现。概要 Angular表单为数据修改，验证等提供支持。

17.4K3 0

Angular 2 + 折腾记：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

前言表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。...--ngSubmit是用来触发表单提交的--> <!...()函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动(Reactive...class="fpd fpd-error"> {{messageTips}} <button...messageTips: string; public login_subscribe: any; // Validators的写法注意事项 // v2.x版本这样的写法是可行的，v4有调整，不然不会生效

3.8K2 0

Angular 内容投影

在介绍 content projection 之前，我们先来观察一下以下的表单。对于同一个系统来说，下面的两个表单的区别在于使用不同的标题。...答案是可以的，在 Angular 中引入了内容投影的概念，即通过使用指令来实现内容投影的功能。 ?...下面我们来介绍在组件内部，如何获取投射的内容。在 Angular 中提供了 ContentChild 装饰器来获取投影的元素。...ng-container> 当你刷新页面的时候...总结不会 “产生” 内容，它只是投影现有的内容。

2.5K2 0

Angular 从入坑到挖坑 - 表单控件概览

表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，而响应式表单在表单数据发生变更时，FormControl 实例会返回一个新的数据模型，...，从而生成错误信息列表在进行用户输入数据有效性验证时，在控件上通过添加一个模板引用变量来暴露出 ngModel，从而在模板中获取到指定控件的状态信息，之后就可以通过获取错误信息列表来进行反馈 <div...在数据验证失败的情况下，对于系统来说，表单是不允许提交的，因此可以将提交事件绑定到表单的 ngSubmit 事件属性上，通过模板引用变量的形式，在提交按钮处进行数据有效性判断，当无效时，禁用表单的提交按钮...4.4、表单的自定义数据验证 4.4.1、自定义验证器在很多的情况下，原生的验证规则无法满足我们的需要，此时需要创建自定义的验证器来实现对于响应式表单，我们可以定义一个方法，对控件的数据进行校验，之后将方法作为参数添加到控件定义处即可...g directive direactives/hero-validate 在创建完成指令之后，我们需要将这个指令将该验证器添加到已经存在的验证器集合中，同时为了使这个指令可以与 angular 表单集成在一起

18.9K2 0

AngularJS一些简单处理得到性能提升

不会仅对{% raw %}{{variable}}{% endraw %}建立watcher，而是对整个p标签。...操作DOM之后，浏览器渲染之前执行。...controller中执行的$evalAsync，会在angular操作DOM之前执行，一般不这么用。而使用$timeout，会在浏览器渲染之后执行。...使用 track by 刷新数据时，我们常这么做：$scope.tasks = data || [];，这会导致angular移除掉所有的DOM，重新创建和渲染。...参见参见: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

1.7K2 0

在前端中理解MVC服务之 Angular篇(完结)

在第三篇文章中，应用程序将使用 Angular 构建，该版本来自TypeScript 的第二个版本。因此，本文介绍应用程序从 TypeScript 到Angular的迁移。...最后，在最后一篇文章中，我们将转换代码以将其与 Angular 框架集成。第 1 部分。了解前端的 MVC 服务：VanillaJS 点击直达第 2 部分。...('users', JSON.stringify(users)); } 此方法不会调用创建服务时绑定的函数，在 JavaScript 或 TypeScript 中开发时callback是必需的，因为...Angular 执行此任务，在Cont和Model之间执行绑定。...还必须注意的是，在本文中，我们将应用程序从 TypeScript 迁移到了 Angular，让我们忘记了那些与我们开发的所有 Web 应用程序都相同的重复任务。

4.1K2 0

Angular 结合 NG-ZORRO 快速开发

结合 ng-zorro angular 比较流行的 ui 框架有： Angular Material 官方指定 UI 框架 NG-ZORRO，又名 Ant Design of Angular 国内比较流行的...如果你还不了解相关的 angular 主要内容，请先前往文章了解 Angular 开发的内容。...结合 ng-zorro 完成之后，我们运行项目起来 npm run start，你会在 http://localhost:4200 的页面看到下图内容。..., "name": "Jim", "position": "Backend" } ], "environment": "development" } 编写好服务之后...="login-form" (ngSubmit)="submitForm()"> <nz-form-control nzErrorTip="请输入用户名!"

1.7K1 0

AngularJS入门 & 分页 & CRUD示例

{{ }}：双括号，是 angularJS 插值表达式，利用括号获取值，同时也可以在花括号中编写表达式。.../brand/findPage.do?...fa-trash-o"> 删除 <!.../brand/findOne.do?.../brand/delete.do?

3.2K4 0

ng 核心模块

ngApp指令指定应用的根元素并且通常放置在接近页面的根元素 – 例如在body或者html标签上。...使用Angular标记类似于{{hash}}在一个href属性中，如果点击的时机早于Angular替换{{hash}}标记将导致连接到错误的URL。...使用Angular 标记例如{{hash}}在一个srcset属性中不能正确工作：浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。...ngChecked指令用来解决checked属性的这个问题，这个补充指令不会在浏览器删除因为它提供了一个可靠的位置去存储绑定信息。...These rules are bundled with angular.js, but can be overridden (see Angular i18n dev guide).

1.2K1 0

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

@Override public void add(TbBrand brand) { // 判断品牌名称是否重复：方法一：代码逻辑上判断，如下；方法二：数据库设置品牌表的.../brand/delete.do?.../brand/search.do?..." title="刷新" onclick="window.location.reload();"> 刷新

8.9K6 4

浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

简单来说，单页面App不需要频繁切换网页，可以局部刷新，整个加载流畅度会好很多。...data-baseurl是额外加入的属性，主要好处是可以轻松在html（0缓存）中对js的url进行修改。 data-main就是requirejs的标准写法了，跳过不说。...(document, ['webapp']); }); })(window); requirejs的语法，说来话长，简单在代码中做了注释。...$interval(function () { i++; $scope.info = i; }, 1000);...但是，路由表的配置还是略复杂，每次大家都要写一大堆代码，这不是我们想要的，那么可以抽取公用代码，再优化一下。第六步，优化路由表，变成真正的配置化。

3.3K2 0

Angular 显示英雄列表

浏览器刷新之后，英雄列表出现了。给英雄们应用样式表英雄列表应该富有吸引力，并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄时，应该给出视觉反馈。...你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。... 浏览器刷新之后

4K3 0

Angular 显示英雄列表

浏览器刷新之后，英雄列表出现了。给英雄们应用样式表英雄列表应该富有吸引力，并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄时，应该给出视觉反馈。...你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。...name: 浏览器刷新之后

4.4K7 0

Angular v18 现已推出！

与此同时，我们还用新的 Material 3 主题和文档刷新了 material.angular.io。您可以在我们的指南中找到如何在您的应用程序中使用 Angular Material 3！...有一个主要的障碍是让更多的人利用水合作用——缺乏 i18n 支持。在与 Chrome Aurora 团队合作后，我们很高兴地与大家分享，i18n 块的水合作用功能在 v18 的开发者预览模式下可用！...从 v18 开始，事件调度在使用混合渲染时为事件回放提供支持。大多数开发人员不会直接与事件调度进行交互，因此让我们研究一下为什么事件回放很有用。您可以在下面找到一个简单的电子商务网站的模拟。...Firebase 在今年的 Google I/O 大会上宣布了 App Hosting。...在过去的 6 个月中，我们从人们那里收集了更多反馈，并完善了更新体验，使每个人都能够迁移到新的构建体验并获得编辑/刷新提升。您可以在我们的更新指南中找到我们开发的工具，以自动执行更新体验。

871 0

构建具有用户身份认证的 Ionic 应用

Ionic 2 在一月份发布，可以使用 Angular 开发 Ionic 应用。 Ionic 3 在四月份发布，允许使用 Angular 4 进行开发。...你可以退出之后看一下带标识的登录页。 ? 注意：你可能注意到退出之后标签页并没有消失。我正在查找没有正常工作的原因。发布到移动设备使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...如果你在登录页输入凭证，可能什么也不会发生。打开 Safari 转到 Develop > Simulator > MyApp / Login，你会看到控制台有一条错误信息。...我相信使用 Cordova 打包 app 之后并不会正常工作，因为通过内嵌的 iframe 向服务端发送请求，然后使用 postMessage 将结果返回当前窗口。...= 0; i < responseParameters.length; i++) { parsedResponse[responseParameters[i].split('

23.8K0 0

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

//下面这种写法在TS下不会有效果....管理,导致刷新的变量是self中的isBackColor. 3.2http参数传递按照下面代码传参数应该是没有问题的,但是我遇到了url被编码问题,例如输入`1111@qq.com会被转换为1111%...的路由匹配规则是从根路由也就是forRoot()的这个开始.在该处匹配寻找规则....那么问题来了为什么访问www.domain.xx之后页面内跳转到路由没问题呢?...这是因为访问主域名后angular的js都已经全部加载了,这个时候跳转是js来控制的,不经过nginx自然不会出现上面的问题.

3.1K2 0

AngularDart4.0 指南- 模板语法一顶

一些合法的HTML在模板中没有多大意义。，和元素没有用处。剩下一切都是一致的。您可以使用组件和指令出现的新元素和属性来扩展模板的HTML词汇表。...在Angular的早期教程中，你遇到了插值的双曲括号{{and}}。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...Dart 2.0注意：检查模式不会出现在飞镖2.0。有关更多信息，请参阅Dart 2.0更新。记住括号括号告诉Angular评估模板表达式。...这个初始值永远不会改变。一次性字符串初始化在标准HTML中是常规的，并且它对于指令和组件属性也同样适用。

5.1K1 0

VFP表单返回对像、数组、值，这个细节要注意，防止崩溃

我们会选择模式表单进行返回值操作，为了保证表单的临时表是独立环境，各个表单的数据不会影响，我们选择私有工作期。...但有以下原因的时候，返回值并非为意想中的值． 1　当模式表单在LOAD,INIT事件加载出错 2 在init事件中 return 0 此时表单不会调用Unload方法返回值，而且没有返回值。...Do Form 模式表单 TO uReturn if !...调用表单 local oCustom do form frmTest to oCustom ?...") Return oFly 如果从表单中的一个表中返回数组 oFly=Createobject("Empty") select * from 表名 into array xxy larow=ALEN

5752 0

构建具有用户身份认证的 Ionic 应用

Ionic 2 在一月份发布，可以使用 Angular 开发 Ionic 应用。 Ionic 3 在四月份发布，允许使用 Angular 4 进行开发。...你可以退出之后看一下带标识的登录页。 ? 注意：你可能注意到退出之后标签页并没有消失。我正在查找没有正常工作的原因。发布到移动设备使用 Ionic 在浏览器中开发移动应用是非常酷的事情。...如果你在登录页输入凭证，可能什么也不会发生。打开 Safari 转到 Develop > Simulator > MyApp / Login，你会看到控制台有一条错误信息。...我相信使用 Cordova 打包 app 之后并不会正常工作，因为通过内嵌的 iframe 向服务端发送请求，然后使用 postMessage 将结果返回当前窗口。...= 0; i < responseParameters.length; i++) { parsedResponse[responseParameters[i].split('

23.2K5 0

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

配置好整个项目之后你可以把 name 去掉试试, 如果去掉的话, 在web api的controller里面就无法取得到user的name了, 因为js收到的access token里面没有name这个...@angular/cli 然后在项目根目录执行: npm install 虽然npm有点慢, 但是也不要使用cnpm, 有bug. js客户端参考你可以参考官方文档: http://docs.identityserver.io...5 的interceptor不会修改request, 所以只能clone....所以我在几乎最外层添加了这个authguard, 里面的代码是: import { Injectable } from '@angular/core'; import { CanActivate } from...自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后在iframe里面操作.

5.6K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭