Angular 頁面重新整理
Oluwafisayo Oluwatayo
2023年1月30日
2022年4月20日
作為單頁應用程式,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
函式中。當點選重新整理按鈕時,資料在頁面上傳遞而不重新整理整個頁面,這樣它甚至不會記錄在瀏覽器的歷史記錄中。
Author: Oluwafisayo Oluwatayo
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn