Angular 2 でページをリロード

1. Angular 2 のページネーションロジック
2. Angular でのページリロードの依存関係をインストールする
3. Angular で window.location.reload() を使用して現在のページをリロードする

この記事では、Angular 2 でページをリロードする方法を学習します。Angular CLI を使用して新しいプロジェクトを作成し、依存関係をインストールします。

最も重要なことは、ページの再読み込みに window.location.reload() メソッドを使用することです。最後に、Angular 2 でページの再読み込みの概念を体験できるように、HTML でボタンを作成します。

Angular 2 のページネーションロジック

ページ付けは、コンテンツをページに分割するために使用される手法です。ページネーションロジックは、どのコンテンツをどのページに配置するかを決定します。

これは、次のようなさまざまな方法を使用して実行できます。

1. ページ番号
2. ページサイズ
3. ページ数
4. コンテンツタイプ

Angular 2 のページングロジックは、ページングの概念に基づいています。

Angular でのページリロードの依存関係をインストールする

Angular は、クライアント側の MVC（Model View Controller）フレームワークであり、ボイラープレートコードの削減に役立つ宣言型の双方向データバインディングを提供し、モバイルおよびデスクトップ Web アプリケーションを構築するための開発プラットフォームを提供します。

Angular には、ページのリロードが正しく機能するために必要な多くの依存関係があります。これらの依存関係は、RxJS、Zone.js、SystemJS、Browserify、Gulp、Karma、および Protractor です。

コマンドラインから npminstall を実行して、必要に応じてすべての重要な 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 の 3つのページを作成しました。上記のリロードの助けを借りて、リロードする機能を提供しました。最後に、BootstrapCSS スタイルシートを追加して見栄えを良くしました。

これと同じ方法を使用して、Google Pagination のように複数のページを作成することもできます。この場合、他のページに移動せずに 1つのページをリロードできます。また、これは非常に軽量な方法です。

ここをクリックして、上記のコードのライブデモを確認してください。