コース: Angular 2 基本講座

今すぐコースを受講しましょう

今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。

Routerを加える

Routerを加える

コース: Angular 2 基本講座

1ヶ月の無料トライアルを開始 法人向けサービス

Routerを加える

“

このレッスンではルーターのモジュールから クラスを読み込んで アプリケーションに設定します。 ルーターというのは コンポーネントの表示を切り替えたり ナビゲーションするための機能です。 今アプリケーションを開いていますけど、 この app.module ですね。 これに対して設定を加えます。 その前に１つだけ index.html HTML ドキュメントの方に１つだけ 要素を加えます。 head の中に base という要素で href に対して / ということでパスを指定します。 これは保存しておきましょう。 もう閉じても構いません。 ではこのアプリケーションの モジュールですけど そこに対してルーターのモジュールから クラスを読み込むという処理を加えます。 ここにしましょう。 import、そしてクラスですが from を先にしてしまいます。 @angular で router というのが 一番下にありますね。 これがそのルーターのモジュールです。 そしてクラスの方は RouterModule というクラスです。 これを imports に加えます。 デコレーター関数の中のプロパティ imports ですね。 ここに対してカンマ区切りで 追加します。 RouterModule これはメソッドを使うんですけど forRoot というメソッドです。 そして引数は 配列です。 その中にオブジェクトの形で path と。 path は heroines としますけど このパスでどのコンポーネントを使うのか ということで component ここでは HeroinesComponent を 選ぶことにします。 そして一旦保存しましょう。 「ファイル」＞「保存」です。 それからコンポーネントの方にも 少し修正を加えます。 ルーターの方で ナビゲーションしますから この my-heroines という セレクターを指定する必要はなくなります。 その代わりに別のものを使うんですが その前に a 要素を１つ加えます。 そしてこの a 要素を クリックした時に リンクにルーターで飛ばします。 ですので、ディレクティブを使うんですが、 routerLink と わかりやすい名前ですね。 そしてどこにリンクするのか ということなんですが heroines 閉じまして a 要素に…

目次