| 在 Angular 2 中重新加载页面 | 您所在的位置：网站首页 › 如何解除加载项安装程序 › 在 Angular 2 中重新加载页面 |
|
当前位置：主页 > 学无止境 > WEB前端 > Angular >
Vue
React
JavaScript
Angular
CSS
HTML
在 Angular 2 中重新加载页面
作者：迹忆客
最近更新：2023/04/14
浏览次数：
本文将学习如何在 Angular 2 中重新加载页面。我们将使用 Angular CLI 创建一个新项目并安装依赖项。 最重要的是，我们将使用 window.location.reload() 方法来重新加载页面。最后，我们将在 HTML 中制作按钮，以便我们可以体验 Angular 2 中页面重新加载的概念。 Angular 2 中的分页逻辑分页是一种用于将内容划分为页面的技术。分页逻辑决定哪些内容应该在哪个页面上。 它可以通过使用多种方法来完成，例如： 页码 页面大小 页数 内容类型Angular 2 中的分页逻辑基于分页的概念。 在 Angular 中安装页面重新加载的依赖项Angular 是一个客户端 MVC（模型视图控制器）框架，它提供声明式双向数据绑定，有助于减少样板代码，并为构建移动和桌面 Web 应用程序提供开发平台。 Angular 有许多依赖项，这些依赖项是页面重新加载正常工作所必需的。这些依赖项是 RxJS、Zone.js、SystemJS、Browserify、Gulp、Karma 和 Protractor。 从命令行运行 npm install 以根据你的需要安装所有必要的 npm 软件包（package.json 所在的位置）。我们不使用特殊的依赖项；因此，我们不会在这里指定它们。 在 Angular 中使用 window.location.reload() 重新加载当前页面在 Angular 中重新加载页面的最佳方法是 window.location.reload()。 Window.location.reload() 是一个在浏览器中重新加载当前页面的 JavaScript API，可以通过调用 window.location.reload() 来调用。 此 API 用于在不重新加载整个页面的情况下刷新或更新 HTML 文档。对于具有大量内容和动态内容的 Web 应用程序（如新闻站点或博客），用户可能希望在每次访问移动设备（电子邮件客户端、社交媒体站点）上的站点时不刷新浏览器的情况下查看更新，这很有帮助。 它对于从服务器加载更新的数据或刷新页面内容而不关闭它并再次打开它也很有用。它还可以解决加载外部资源或脚本的一些问题。 此外，它是 Angular 的一个鲜为人知的特性，因为大多数开发人员都不知道它。虽然，当你需要将内容动态加载到固定长度的列表或表格中并在视口大小上启用分页时，它非常有用。 [点击这里了解更多。 让我们讨论一个例子来了解如何更好地使用 window.location.reload()。 app.component.ts 代码如下。 import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { Home(): void { window.location.reload(); } About(): void { window.location.reload(); } Contact(): void { window.location.reload(); } Services(): void { window.location.reload(); } Goods(): void { window.location.reload(); } }app.component.html 代码如下。 Example of Page Reload in Angular 2 Press the given below buttons to check the live demonstration of page reloading in Angular Home About Contact Services Goods在这个例子中，我们创建了三个页面 refresh、home 和 about；在上面提到的重新加载的帮助下，我们给了他们重新加载的功能。最后，我们添加了一个 Bootstrap CSS 样式表，让它看起来更漂亮。 你还可以使用相同的方法创建多个页面，例如 Google Pagination，你可以在其中重新加载一个页面而无需移至其他页面。而且，这是一个非常轻量级的使用方法。 上一篇：在 Angular 2 中使用 jQuery 下一篇：没有了 转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处 本文地址： 相关文章 在 Angular 2 中使用 jQuery发布时间：2023/04/14 浏览次数：102 分类：Angular 本教程演示了如何在 Angular 2 中使用 jQuery。jQuery 是一个轻量级的 JavaScript 库，可以更轻松地在网站上使用 JavaScript。 在 Angular 2 中将选择元素绑定到对象发布时间：2023/04/14 浏览次数：160 分类：Angular 在本文中，我们将学习如何一起使用 ng-for 和 ng-value 指令，以便将选择元素与 Angular 2 中的对象绑定。 使用 AngularJS 的简单弹出窗口发布时间：2023/04/14 浏览次数：160 分类：Angular Angular 是一个有多种用途的框架，我们必须安装一些依赖项才能让弹出模式工作。本文演示了使用 AngularJS 进行简单弹出的方法 捆绑用于生产的 Angular 应用程序发布时间：2023/04/14 浏览次数：168 分类：Angular 在本教程中，我们将学习以最佳方式捆绑 Angular 应用程序以进行生产的最佳方法。 检查 Angular 版本发布时间：2023/04/14 浏览次数：62 分类：Angular 本教程演示了如何检查 Angular 版本。一旦你在 Angular 中安装了一个应用程序，你可能想知道你的应用程序上安装了哪个版本的 Angular。 卸载和安装 Angular CLI发布时间：2023/04/14 浏览次数：177 分类：Angular 卸载 Angular CLI 的原因有很多。我们可能希望将 CLI 更新到最新版本，因此我们可能必须从计算机上完全卸载它。 更新 Angular CLI发布时间：2023/04/14 浏览次数：128 分类：Angular 本教程演示了如何将 Angular CLI 更新到最新版本。更新 Angular CLI 版本非常容易，但许多程序员都有问题。 访问控制允许 AngularJS 中的来源发布时间：2023/04/13 浏览次数：93 分类：Angular Access-Control-Allow-Origin 标头指定哪些域可以访问内容。默认情况下，AngularJS 使用一个空字符串作为值，这意味着任何域都可以访问它。 CLI - 在 Angular 上为生产构建发布时间：2023/04/13 浏览次数：101 分类：Angular 在制作好 Web 应用程序并准备好部署后，我们要求 Angular 将所有不同的代码片段编译到一个构建中。构建被压缩成更小的尺寸。 |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |