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 }

];

이렇게 하면 /home 경로로 이동하면 홈 구성 요소로 이동하는 것과 같이 별도의 URL이 있는 두 페이지가 생성됩니다. 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 기능으로 발생합니다. 새로고침 버튼을 클릭하면 전체 페이지를 새로고침하지 않고 페이지에 데이터가 전달되어 브라우저 히스토리에도 기록되지 않습니다.