【Angular】コンポーネントの新規作成

2021年12月11日

Angularで画面表示に使っているのは、主にComponentのhtmlの内容であり、
index.html、main.ts、app.module.tsとかはComponentを呼び出して出力しています。
つまり、Angularで新規画面の追加をする際にはComponentを新規作成していくことになりますので、今回はその方法について紹介していこうと思います。

スポンサーリンク

コマンドプロンプトより作成できる

コマンドプロンプトを起動して、プロジェクトの場所に移動し、以下のコマンドを実行してみてください。

ng generate component ○○○○(コンポーネントの名前)

するとこのようになります

プロジェクトを確認すると、4つのファイルが作成されており、

  • src/app/ringo/ringo.component.html
  • src/app/ringo/ringo.component.spec.ts
  • src/app/ringo/ringo.component.ts
  • src/app/ringo/ringo.component.css

app.module.tsが更新されていることが分かります。

コンポーネント新規作成で作られたファイル

まず、ringo.component.htmlを確認すると

<p>ringo works!</p>

この一文だけが書かれています。シンプルですね。
ちなみにringo.component.cssは空なので、文字の色とか大きさとかはデフォルトのまま、「ringo works!」と表示するだけです。

次にringo.component.tsを見てみると

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ringo',
  templateUrl: './ringo.component.html',
  styleUrls: ['./ringo.component.css']
})
export class RingoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

こちらもシンプルですね。
app-ringoというコンポーネントのクラスを定義しているだけです。
ちなみに constructor() { } はコンストラクタと言って、このクラスのインスタンスを生成する際に実行される処理になります。
ngOnInit(): void { } はコンポーネントの初期化処理になります。
この画面の初期表示時になにか処理がしたいときは、このあたりのメソッドに記述していくことになります。

app.module.tsの更新内容

app.module.tsの中身は以下のように変わっています

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { RingoComponent } from './ringo/ringo.component';

@NgModule({
  declarations: [
    AppComponent,
    RingoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { RingoComponent } from './ringo/ringo.component’; が追加されて、今回新規作成されたコンポーネントを読み込むようになり、
NgModuleデコレータのdeclarationsにRingoComponentが追加され、モジュールの中に新規作成したコンポーネントが追加されています。
とはいえ、bootstrap(起動時に実行される処理)はAppModuleのままであり、index.htmlでも< app-ringo >タブとかは使っていないので、新規作成したコンポーネントは現状画面表示には一切関わってきません。
新規作成したコンポーネントを編集した後、画面遷移用の処理などを追記していく必要があります。

終わりに

コンポーネントの新規作成について方法を紹介していきました。
今回はコマンドプロンプトから行いましたが、当然手動でファイルを新規作成したり、app.module.tsを修正したりしても同様のことができます。

スポンサーリンク

Angular開発

Posted by 社畜林檎