迹忆客 专注技术分享

本文将学习如何在 Angular 2 中重新加载页面。我们将使用 Angular CLI 创建一个新项目并安装依赖项。

最重要的是，我们将使用 window.location.reload() 方法来重新加载页面。最后，我们将在 HTML 中制作按钮，以便我们可以体验 Angular 2 中页面重新加载的概念。

Angular 2 中的分页逻辑

分页是一种用于将内容划分为页面的技术。分页逻辑决定哪些内容应该在哪个页面上。

它可以通过使用多种方法来完成，例如：

1. 页码
2. 页面大小
3. 页数
4. 内容类型

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 代码如下。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h3>Example of Page Reload in Angular 2</h3>
<h6>Press the given below buttons to check the live demonstration of page reloading in Angular</h6>
<div> <button (click)="Home()">Home</button></div>
<br>
<br>
<div> <button (click)="About()">About</button> </div>
<br>
<br>
<div> <button (click)="Contact()">Contact</button> </div>
<br>
<br>
<div> <button (click)="Services()">Services</button> </div>
<br>
<br>
<div> <button (click)="Goods()">Goods</button> </div>

在这个例子中，我们创建了三个页面 refresh、home 和 about；在上面提到的重新加载的帮助下，我们给了他们重新加载的功能。最后，我们添加了一个 Bootstrap CSS 样式表，让它看起来更漂亮。

你还可以使用相同的方法创建多个页面，例如 Google Pagination，你可以在其中重新加载一个页面而无需移至其他页面。而且，这是一个非常轻量级的使用方法。