コンポーネント

Tweet

コンポーネントの分割

前ページのコンポーネントは一つのコンポーネントにすべて記述する場合を説明してきました。
しかし、プログラムが大きくなってくると、コンポーネントを分割したくなってきます。
本節では、helloComponentからmessageコンポーネントを呼び出す方法について説明します。

まず、helloCompoent.tsを以下のように初期状態に戻してください。

[hello.compoent.ts]

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

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

  constructor() { }

  ngOnInit(): void {

  }
}

そして、hello.compoent.htmlを以下のように記述します。

<h1>これはhelloコンポーネントです</h1>
<p>messageコンポーネントを呼び出します↓</p>
<app-message></app-message>

3行目でapp-messageタグを追加しています。この部分が、messageコンポーネントに置き換わります。
以下のコマンドを実行して、messageコンポーネントを作成します。

ng generate component message

生成されたmessage.component.htmlを次のように変更し、テキストボックスとサブミットボタンのフォームを作成します。

[message.compoent.html]

<div class="container">
    <h3>これはmessageのコンポーネントです</h3>
    <form [formGroup]="messageFormGroup"  (submit)="onClick()">
        <input type="message" formControlName="message" />
        <input type="submit" value="click" />
    </form>
</div>

最後に、message.compoent.tsを次のように変更し、サブミットボタンが押されたらコンソールにメッセージを表示するようにします。

[message.compoent.ts]

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {
  messageFormGroup = new FormGroup({
    message: new FormControl('')
  });

  @Input() message:string = "";


  constructor() { }


  ngOnInit(): void {

  }

  onClick() {
    this.message = this.messageFormGroup.get("message").value;
    console.log(this.message);
  }

}

そして、以下のURLにアクセスしてみます。

http://localhost:4200/hello

http://localhost:4200/messageではなくて、http://localhost:4200/helloです。

すると、次の画面のようにhelloのコンポーネントにmessageのコンポーネントが表示されます。