Angularでページが見つからない場合に自動遷移させたいのです。
Angularではルーティングの設定をしますよね。
ページが見つからない場合は、特定のエラーページへ飛ばす想定なのですが、そこで3秒後にログイン画面へ自動遷移するような仕組みを実装したいわけです。
というわけで今回は、エラーページからの自動遷移について解説します！
Angularプロジェクトの新規作成方法はこちら
Angular7で新規プロジェクトを作りたい！ Angularでプロジェクトを作成するのは非常に簡単です！ ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します！ 前提 前提として、以下がインスト[…]
目次
自動遷移の実装概要
自動遷移をするためには、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秒後にログイン画面へ自動遷移していますね。
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
AngularはTypeScriptですが、あくまでJavaScriptの延長です。
JavaScriptを書いてきた方であれば、今回の実装は簡単ですね。
ただ、こういうソースコードをコンテンツとして持っておくと、あとあと便利ですね。
ではまた！