やっほー
【Angular】ページが見つからない場合の自動遷移!

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

  • 2019年1月14日
  • 2021年3月19日
  • Angular
  • 48view

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

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

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

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

Angularプロジェクトの新規作成方法はこちら

Angular7で新規プロジェクトを作りたい! Angularでプロジェクトを作成するのは非常に簡単です! ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します! 前提 前提として、以下がインスト[…]

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

自動遷移の実装概要

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

  • Metaに定義するパターン
  • JavaScriptで操作するパターン

Metaに定義するパターン

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

JavaScriptで操作するパターン

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

自動遷移の実装

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

コンポーネントの作成

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

 

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

ルーティングの設定

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

エラー画面の実装

3秒後にログイン画面へ遷移するように実装します。これで完成!

画面を見てみると

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

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

 

ログイン画面

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

おすすめ書籍

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

まとめ

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

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

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

ではまた!

【Angular】ページが見つからない場合の自動遷移!
フォローしてもらえると泣いて喜びます