Angular 2에서 페이지 새로고침

1. Angular 2의 페이지 매김 논리
2. Angular에서 페이지 다시 로드를 위한 종속성 설치
3. window.location.reload()를 사용하여 Angular에서 현재 페이지 다시 로드

이 기사에서는 Angular 2에서 페이지를 다시 로드하는 방법을 배웁니다. Angular CLI를 사용하여 새 프로젝트를 만들고 종속 항목을 설치합니다.

가장 중요한 것은 페이지를 다시 로드하기 위해 window.location.reload() 메서드를 사용한다는 것입니다. 마지막으로 Angular 2에서 페이지 다시 로드의 개념을 경험할 수 있도록 HTML로 버튼을 만들 것입니다.

Angular 2의 페이지 매김 논리

페이지 매김은 콘텐츠를 페이지로 나누는 데 사용되는 기술입니다. 페이지 매김 논리는 어떤 콘텐츠가 어떤 페이지에 있어야 하는지를 결정합니다.

다음과 같은 다양한 방법을 사용하여 수행할 수 있습니다.

1. 페이지 번호
2. 페이지 크기
3. 페이지 수
4. 콘텐츠 유형

Angular 2의 페이지 매김 논리는 페이징 개념을 기반으로 합니다.

Angular에서 페이지 다시 로드를 위한 종속성 설치

Angular는 상용구 코드를 줄이는 데 도움이 되는 선언적 양방향 데이터 바인딩을 제공하고 모바일 및 데스크톱 웹 애플리케이션 구축을 위한 개발 플랫폼을 제공하는 클라이언트 측 MVC(모델 보기 컨트롤러) 프레임워크입니다.

Angular에는 페이지 새로고침이 제대로 작동하는 데 필요한 많은 종속성이 있습니다. 이러한 종속성은 RxJS, Zone.js, SystemJS, Browserify, Gulp, Karma 및 Protractor입니다.

명령줄에서 npm install을 실행하여 필요에 따라 모든 필수 npm 패키지를 설치합니다(package.json이 있는 위치). 우리는 특별한 의존성을 사용하지 않습니다. 따라서 여기에서 지정하지 않습니다.

window.location.reload()를 사용하여 Angular에서 현재 페이지 다시 로드

Angular에서 페이지를 다시 로드하는 가장 좋은 방법은 window.location.reload()입니다.

Window.location.reload()는 브라우저에서 현재 페이지를 다시 로드하는 JavaScript API로 window.location.reload()를 호출하여 호출할 수 있습니다.

이 API는 전체 페이지를 다시 로드하지 않고 HTML 문서를 새로 고치거나 업데이트하는 데 사용됩니다. 이는 사용자가 모바일 장치(이메일 클라이언트, 소셜 미디어 사이트)에서 사이트를 방문할 때마다 브라우저를 새로 고치지 않고도 업데이트를 보고 싶어하는 뉴스 사이트나 블로그와 같이 콘텐츠가 많고 동적 콘텐츠가 많은 웹 앱에 유용합니다.

서버에서 업데이트된 데이터를 로드하거나 페이지를 닫았다가 다시 열지 않고 페이지 내용을 새로 고칠 때도 유용합니다. 또한 외부 리소스 또는 스크립트 로드와 관련된 일부 문제를 해결할 수도 있습니다.

또한 대부분의 개발자가 인식하지 못하기 때문에 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 페이지 매김과 같은 여러 페이지를 만들 수도 있습니다. 또한, 이것은 매우 가벼운 방법을 사용합니다.

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.