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 を持つ 2つのページが作成され、/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 関数で起こります。更新ボタンをクリックすると、ページ全体を更新せずにデータがページに渡されるため、ブラウザの履歴にも記録されません。