Angular 頁面重新整理

1. 安裝和匯入一些依賴
2. 在 Angular 中建立一個按鈕以重新整理頁面

作為單頁應用程式，Angular 要求在傳遞新資料時預設重新整理應用程式。我們將研究在 Angular 上進行頁面重新整理的最佳方法。

安裝和匯入一些依賴

首先，我們必須前往我們的編輯器，最好開啟終端 Visual Studio Code 並使用 ng generate 函式建立 app-routing.module.ts。

然後，我們執行 $ ng generate component home 命令，之後我們執行 $ ng generate component about 命令。

建立 app-routing.module.ts 檔案後，我們開啟它的檔案並匯入以下元件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
Next, add the routes as follows:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }

];

這會建立兩個具有不同 URL 的頁面，這樣如果你前往 /home 路徑，它會將你帶到 home 元件； about 元件也是如此。

雖然仍在 app-routing.ts 頁面中，但我們在以下命令中編寫程式碼：

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

在 Angular 中建立一個按鈕以重新整理頁面

然後我們前往 app.component.html 建立一個按鈕：

<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <a routerLink="/test" >Test</a>
    <button type="button" (click)="refresh()" >
        Refresh
    </button>
</div>

<router-outlet></router-outlet>

我們的最後一站將在 app.component.ts 部分，我們將在其中傳遞下一段程式碼。但首先，我們必須匯入一些函式：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

然後我們在 app.component.ts 中執行這些程式碼：

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'refreshPage';
	constructor(public _router: Router, public _location: Location) { }
	refresh(): void {
		this._router.navigateByUrl("/refresh", { skipLocationChange: true }).then(() => {
		console.log(decodeURI(this._location.path()));
		this._router.navigate([decodeURI(this._location.path())]);
		});
	}
}

真正的魔法發生在 skipLocationChange 函式中。當點選重新整理按鈕時，資料在頁面上傳遞而不重新整理整個頁面，這樣它甚至不會記錄在瀏覽器的歷史記錄中。