みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Angularの解説シリーズです。
今回はコンポーネントの作成と埋め込みについて学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- コンポーネントの構造がわかる
- コンポーネントの作成方法がわかる
- コンポーネントの埋め込み方がわかる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansboxを使ってね!
作りたいもの

前回の記事で作成した画面のこの部分を
別のコンポーネントとして分離し、ルートファイルに埋め込む。

【Angular】データと画面を紐付けよう!【初期設定】
これが今回の完成形だよ!
他のファイルは左上のハンバーガーメニューをクリックして確認してね!
Angularにおけるコンポーネント

コンポーネントを作成しよう
ng generate component
コンポーネントを作成するには、以下のコマンドを使用します。
ng generate component コンポーネント名


このように、componentに関するファイルが一式作成されました
コンポーネントの構造

コンポーネントに関するファイルとそれぞれの役目はこうです
- ◯◯.component.css スタイルシート
- ◯◯.component.html 画面用
- ◯◯.component.spec.ts ユニットテスト用
- ◯◯.component.ts 処理
ファイルを編集しよう

main-content.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
// コンポーネント埋め込み時のタグ名
selector: 'app-main-content',
// 本TypeScriptの対応するHTMLファイル
templateUrl: './main-content.component.html',
// コンポーネント用スタイルシート
// 【重要】親のコンポーネントには影響しない
styleUrls: ['./main-content.component.css'],
})
// ロジックを記述
export class MainContentComponent implements OnInit {
name = 'サメハック';
message = 'hello angular!';
constructor() {}
// 初期処理
ngOnInit(): void {}
}
コンポーネントの関係性については@Componentに記述されています。
埋め込む際はこのselectorを使用するよ!
main-content.component.html
<p>こんにちは、{{ name }}です!</p>
<!-- 元のmessage -->
<p>message・・・ {{ message }}</p>
<!-- JavaScriptの関数を使って大文字に変換 -->
<p>message.toUpperCase()・・・ {{ message.toUpperCase() }}</p>
ここまではapp.componentの記述をコピペしただけだよ!
コンポーネントを埋め込もう

main-contentコンポーネントをルート画面に埋め込みましょう。
埋め込むためには、main-content.component.tsで指定した
セレクター名をHTMLのタグとして記述します。
■構文
<selector名></selector名>
app.component.html
<h1>{{ title }}</h1>
<!-- main-contentコンポーネントの埋め込み -->
<app-main-content></app-main-content>
これでコンポーネントの埋め込みができたよ!
作成したコンポーネントのCSSについて
main-content.component.css
このCSSファイルはmain-content.htmlと同階層のファイルのみを対象としています。
なので、ワイルドカードを使用しても”ページタイトル”の色は変わりません。
* {
color: red;
}

まとめ

- ng generate component コンポーネント名 ・・・コンポーネント作成コマンド
- 作成したコンポーネントを埋め込むには、selectorをHTMLタグとして指定

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈