月間25,000PV達成! 収益は毎日発生中! 記事はほぼ毎日更新中! ギランバレー症候群に関する情報を集めています

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

【Angular】エラーページからの自動遷移を実装!
Advertisement

 

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

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

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

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

 

 

僕のPC環境

OS:Windows10

Angular:7

 

 

 

自動遷移の実装概要

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

・Metaに定義するパターン

・JavaScriptで操作するパターン

 

Metaに定義するパターン

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

 

JavaScriptで操作するパターン

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

 

 

Advertisement

 

自動遷移の実装

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

 

コンポーネントの作成

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

 

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

 

ルーティングの設定

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

 

エラー画面の実装

3秒後にログイン画面へ遷移するように実装します。

これで完成!

 

 

画面を見てみると

ページが見つかりません画面

エラー画面へ遷移させます。

 

 

ログイン画面

3秒後にログイン画面へ自動遷移していますね。

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

AngularはTypeScriptですが、あくまでJavaScriptの延長です。

JavaScriptを書いてきた方であれば、今回の実装は簡単ですね。

ただ、こういうソースコードをコンテンツとして持っておくと、あとあと便利ですね。

ではまた!

Travelerを知らないの?