Angular6 + Bootstrap4でWebアプリを作ろう（コンポーネント）

こんにちはふるてつです。 今回はAngularのコンポーネントについて書いてみます。

CLIコマンドについて

Angularでコンポーネントを作るには、基本的にはCLIコマンドを使ったほうが便利です。
文法は意外と簡単です。
ng g component xxx

コンポーネント以外にはモジュールやサービスも作れます。
そこは公式ドキュメントで確認ください。
https://angular.jp/cli/generate

コンポーネントの考え方

では1画面のどこをコンポーネントに分けるかですけど。

私の場合は、もとからあった「app.component」に加えて、①ヘッダー「header.component」と ②フッター「footer.component」を追加しました。
ヘッダーはBootStrapのメニュー部分にします。
フッターは会社情報などにしようと思ってます。

vscodeでみると下記のような感じです。
下の写真の左側に3つコンポーネントが並びます。
写真右側はapp.componentのhtmlで①ヘッダーのセレクタと、②フッターのセレクタを呼び出すようにしています。
あと中身の部分はルーター<router-outlet>で変えられるようにしました。

app.component.htmlの中身例

<div class="container-fluid">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

footer.component.tsの中身例

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

今日の感想

以上、検索画面を例にコンポーネントの分け方を考えてみました。
補足になりますがこの画面の分け方だとログイン画面の場合もメニューが表示されてしまいます。
わたしはそこは下のような感じでルーターのURLでメニューを非表示にしました。

<div *ngIf="this.router.url!=='/loginUrl'">
　…メニューの内容
</div>

例に挙げた検索画面ですが「検索結果の件数」と「ページ番号」表示を一覧の上下につけていますが、 同じものが2つあるのが嫌でこれもコンポーネントにしたほうが良いのかなと思っています。

では、ありがとうございました。