【Angular】コンポーネントの作成と読込

前回の記事においてAngular CLIで作成したデフォルトアプリケーションにコンポーネントを追加していきます。

Angularは１年以上前の情報は役に立たないことが多いようです。

この記事も１年後には陳腐化しているかもしれません。

最新情報は英語の公式ドキュメントに目を通す必要があるようですが、わかりにくいドキュメントだと思います。

テンプレート修正
スタイルシート編集
コンポーネント追加
コンポーネント適用
出力された内容

テンプレート修正

トップページのテンプレートを編集してみます。

▼「src/app/app.component.html」

  <h1>Hello World!</h1>

▼ブラウザリロード

スタイルシート編集

▼「styles.css」を編集

* {
    margin: 0;
    padding: 0;
  }
  h1 {
    font-size: 1.4em;
    color: #6666cc;
}

▼ブラウザリロード

コンポーネント追加

ヘッダー、フッター、メニュー等の画面構成要素をコンポーネントとして分割して再利用できるようにします。

▼ヘッダーコンポーネント作成

ng generate component header

「src/app/header/」内にコンポーネントファイル群が生成されます。

コンポーネント適用

追加したコンポーネントを適用してみます。

▼「src/app/app.component.ts」に追記

※冒頭に追記

import { HeaderComponent} from './header/header.component';

※importsに「HeaderComponent」を追記

  imports: [RouterOutlet, HeaderComponent],

※完成形

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent} from './header/header.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

▼「src/app/app.component.html」を編集

<app-header></app-header>
<h1>Hello World!</h1>

▼ブラウザリロード

ヘッダーコンポーネントの内容「header works!」が表示されました。

出力された内容

WEBサーバーからのレスポンスとして出力されるHTMLは次の通りです。

<!doctype html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <app-root></app-root>
    <script src="polyfills.js" type="module"></script>
    <script src="main.js" type="module"></script>
  </body>
</html>

ブラウザのメモリ上で展開されるDOM要素は次の通りです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <app-root _nghost-ng-c582792440="" ng-version="18.1.2">
      <app-header _ngcontent-ng-c582792440="" _nghost-ng-c4147527852="">
        <p _ngcontent-ng-c4147527852="">header works!</p>
      </app-header>
      <h1 _ngcontent-ng-c582792440="">Hello World!</h1>
    </app-root>
    <script src="polyfills.js" type="module"></script>
    <script src="main.js" type="module"></script>
  </body>
</html>

※ルートコンポーネント「app-root」が要素として存在し、

※その子要素として「app-header」コンポーネントの要素が存在しています。

※さらにその子要素としてヘッダーコンポーネントの内容があります。

※そのため、コンポーネントのCSSセレクターは「app-[コンポーネント名]」で特定できるという仕組みのようです。

今回は以上です。

次回はコンポーネントでの変数の取り扱いです。