Angularでページが見つからない場合に自動遷移させたいのです。
Angularではルーティングの設定をしますよね。
ページが見つからない場合は、特定のエラーページへ飛ばす想定なのですが、そこで3秒後にログイン画面へ自動遷移するような仕組みを実装したいわけです。
というわけで今回は、エラーページからの自動遷移について解説します！
目次
僕のPC環境
OS：Windows10
Angular：7
Angularプロジェクトの新規作成方法は以下を参照してください！
自動遷移の実装概要
自動遷移をするためには、2通りの方法があります。
・Metaに定義するパターン
・JavaScriptで操作するパターン
Metaに定義するパターン
|
1 |
<meta http-equiv="refresh"content="10; url=URLを記入"> |
上記のように設定しますが、今回はこのやり方ではやりません。
JavaScriptで操作するパターン
|
1 |
setTimeout("location.href='sample.html'", 3000) |
今回は、この方法でやってみます。
自動遷移の実装
では、自動遷移の実装をしてみます。
コンポーネントの作成
|
1 |
ng g c component/error/page-not-found |
エラー画面を作成します。
|
1 |
ng g c component/login |
ログイン画面を作成します。
ルーティングの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './component/login/login.component'; import { TimepickerComponent } from './component/timepicker/timepicker.component'; import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component'; const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'timepicker', component: TimepickerComponent }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
ルーティングの設定を行います。
エラー画面の実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-page-not-found', template: ` <p>ページが見つかりません。3秒後にログイン画面へ自動遷移します。</p> ` }) export class PageNotFoundComponent implements OnInit { constructor() { } ngOnInit() { setTimeout(this.movePage(), 3000); } private movePage() { return 'location.href = "http://localhost:4200/login";'; } } |
3秒後にログイン画面へ遷移するように実装します。
これで完成！
画面を見てみると
エラー画面へ遷移させます。
3秒後にログイン画面へ自動遷移していますね。
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
AngularはTypeScriptですが、あくまでJavaScriptの延長です。
JavaScriptを書いてきた方であれば、今回の実装は簡単ですね。
ただ、こういうソースコードをコンテンツとして持っておくと、あとあと便利ですね。
ではまた！
