要素の表示非表示をページ毎に切り替える｜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コンポーネント（ヘッダー部分）を組み込んでいます。

<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

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

<nav *ngIf="nav.visible" class="navbar navbar-default">
～省略～
</nav>

手順2.ナビゲーションを非表示にしたいコンポーネントを編集

ナビゲーションを非表示にしたいコンポーネントをhideコンポーネントとした場合、
以下のようにnav.serviceをDIし、初期化処理でhideメソッドを実行します。
hide.component.ts

～省略～
  constructor(
    private nav: NavService
  ) { }
  ngOnInit() {
        this.nav.hide();
  }
～省略～

手順3.appコンポーネントを編集

appコンポーネントではshowメソッドを実行するようにします。

～省略～
  constructor(
    private nav: NavService
  ){}
  ngOnInit(){
    this.nav.show();
  }
～省略～

手順4.表示確認

hideコンポーネントを表示している場合ナビゲーションが非表示になり、
それ以外の場合はナビゲーションが表示されることを確認しましょう。

感想

あるコンポーネントの状態に応じて別コンポーネントの表示を切り替えるのは、
最初は少し難しかったのですが、DIが効果的に活用できることがわかりました。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載