在 Angular 2 中重新載入頁面

1. Angular 2 中的分頁邏輯
2. 在 Angular 中安裝頁面重新載入的依賴項
3. 在 Angular 中使用 window.location.reload() 重新載入當前頁面

本文將學習如何在 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，你可以在其中重新載入一個頁面而無需移至其他頁面。而且，這是一個非常輕量級的使用方法。

點選這裡檢視上面程式碼的演示。