Angularでホームページのような作りにするには
前回Componentを使いボタンを表示しました。
これできっと入力画面やホームページの一画面を作る方法については、
HTMLとAngular Materialを利用する事でできる事がわかりました。
(HTMLは検索してコピペでいけるはず。。。)
ただ複数の画面を遷移する方法がわかりません。
Angular公式ページではRouterというものを使うと説明がありました。
https://angular.jp/start/start-routing
Angular Router を使用すると、アプリケーション内のユーザーの居場所に基づいて、さまざまなコンポーネントとデータをユーザーに表示できます。
早速やってみましょう。
といってもComponentを追加したメニューにはRouterはありません。
公式サイトでは、app.module.tsに直接書き込まれています。
ただ今後サイトっぽい画面を沢山用意する場合は、ここに書いてしまうと
長くなってみにくくなると思いますので、ファイルを別にしましょう。
New Fileを選択し、approuting.module.tsというファイルを作りましょう。
ファイルの中身は以下のように記述してください。
routesという変数を定義しました。
(変数、変数の宣言については、TypeScriptの書き方です)
今回、routesでは、リンクを押された際に表示する画面を指定します。
前回作成したButtonComponentを設定してみましょう。
@NgModuleでは設定した定義のimportを行います。
app.module.tsに、先ほど作ったAppRoutingModuleをimportし、
app.module.tsのimports定義にモジュール名を定義します。
上記の設定を行うと、このプロジェクト内のHTML画面でRouterを利用する事が
できます。
htmlにリンク先を表示するには、router-outletタグを定義します。
router-outletにボタンを表示するために、headerタグにリンクを設定しましょう。
これで表示されてくる画面のリンクを押すと前回作ったボタンがヘッダーの
下に表示されるはずです。
(ごめんなさい。ネットワークの不調でStackBlitzが固まってしまいました)
(表示結果が分からないので、今度調子のいい時に確認してまた更新します)
