要素の表示非表示をページ毎に切り替える｜AngularでWebサイト作成
Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。
基本的な部分は公式チュートリアルなどを参考にしながら進めています。
AngularでWebサイトを作成していく場合、「app」コンポーネントが大枠となり、その中に各ページ要素を組み込んでいきます。
その場合、例えば「app」側でヘッダー、メイン、フッターとコンポーネントを分けていると、ページが変わる場合はメインだけ切り替えればよいことになります。
このような実装にしていた時に、ある特定画面だけはヘッダーナビゲーションを非表示にしたいというケースがありました。
今回はその対応方法をまとめます。
開発環境
・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode
構成確認
現状以下のようにappコンポーネントがnavコンポーネント（ヘッダー部分）を組み込んでいます。
1 2 3 4 5 | <app-nav></app-nav><div id="main" class="container"> <router-outlet></router-outlet></div><app-footer></app-footer> |
router-outletの中身がRouterModuleによって切り替えられます。
手順
手順1.ナビゲーションコンポーネント側を編集
まず、以下のようにnav.service.tsに変数「visible」の「true」「false」を切り替えるメソッドを用意しておきます。
nav.service.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { Injectable } from '@angular/core';@Injectable()export class NavService { visible: boolean; constructor() { this.visible = false; } hide() { this.visible = false; } show() { this.visible = true; }} |
次にテンプレートで「visible」の値によってナビゲーションブロックの表示／非表示を切り替えるようにします。
nav.component.html
1 2 3 | <nav *ngIf="nav.visible" class="navbar navbar-default">～省略～</nav> |
手順2.ナビゲーションを非表示にしたいコンポーネントを編集
ナビゲーションを非表示にしたいコンポーネントをhideコンポーネントとした場合、
以下のようにnav.serviceをDIし、初期化処理でhideメソッドを実行します。
hide.component.ts
1 2 3 4 5 6 7 8 | ～省略～ constructor( private nav: NavService ) { } ngOnInit() { this.nav.hide(); }～省略～ |
手順3.appコンポーネントを編集
appコンポーネントではshowメソッドを実行するようにします。
1 2 3 4 5 6 7 8 | ～省略～ constructor( private nav: NavService ){} ngOnInit(){ this.nav.show(); }～省略～ |
手順4.表示確認
hideコンポーネントを表示している場合ナビゲーションが非表示になり、
それ以外の場合はナビゲーションが表示されることを確認しましょう。
感想
あるコンポーネントの状態に応じて別コンポーネントの表示を切り替えるのは、
最初は少し難しかったのですが、DIが効果的に活用できることがわかりました。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
