【Angular】エラーページからの自動遷移を実装！ │ Traveler

Angularでページが見つからない場合に自動遷移させたいのです。

Angularではルーティングの設定をしますよね。

ページが見つからない場合は、特定のエラーページへ飛ばす想定なのですが、そこで3秒後にログイン画面へ自動遷移するような仕組みを実装したいわけです。

というわけで今回は、エラーページからの自動遷移について解説します！

1. 僕のPC環境
2. 自動遷移の実装概要
- 2.1. Metaに定義するパターン
- 2.2. JavaScriptで操作するパターン
3. 自動遷移の実装
4. 画面を見てみると
5. おすすめ書籍
6. まとめ

僕のPC環境

OS：Windows10

Angular：7

Angularプロジェクトの新規作成方法は以下を参照してください！

Traveler

超簡単！Angular7で新規プロジェクトを作成する方法！

https://traveler0401.com/angular-new-project/

Angular7で新規プロジェクトを作りたい！Angularでプロジェクトを作成するのは非常に簡単です！ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します！僕のPC環境OS：Windows10Angular：7 前提前提として、以下がイン...

自動遷移の実装概要

自動遷移をするためには、2通りの方法があります。

・Metaに定義するパターン

・JavaScriptで操作するパターン

Metaに定義するパターン

<meta http-equiv="refresh"content="10; url=URLを記入">

1	<meta http-equiv="refresh"content="10; url=URLを記入">

上記のように設定しますが、今回はこのやり方ではやりません。

JavaScriptで操作するパターン

setTimeout("location.href='sample.html'", 3000)

1	setTimeout("location.href='sample.html'", 3000)

今回は、この方法でやってみます。

自動遷移の実装

では、自動遷移の実装をしてみます。

コンポーネントの作成

ng g c component/error/page-not-found

1	ng g c component/error/page-not-found

エラー画面を作成します。

ng g c component/login

1	ng g c component/login

ログイン画面を作成します。

ルーティングの設定

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 { }

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 { }

ルーティングの設定を行います。

エラー画面の実装

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";';
  }

}