コンポーネントに入力パラメーターを追加する

このチュートリアルレッスンではinputを作成し、それを使ってコンポーネントにデータを渡してカスタマイズする方法を紹介します。

何を学ぶか

アプリケーションのHousingLocationコンポーネントのテンプレートには、入力を受け取るためのHousingLocationプロパティがあります。

inputプロパティのコンセプト概要

Inputsを使うと、親コンポーネントから渡されるデータを子コンポーネントで受け取れるようになります。

このレッスンでは、コンポーネントで表示されるデータをカスタマイズできるようにするため、HousingLocationコンポーネント内にinputプロパティを定義します。

詳しく学ぶにはinputプロパティでデータを受け取るガイドとoutputを使ったカスタムイベントガイドを参照して下さい。

1. input()関数をインポートする

   コードエディタ―で、HousingLocationコンポーネントに@angular/coreからinputヘルパーメソッドをインポートします。

   housing-location.tsでinputをインポートする

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }
   

2. inputプロパティを追加する

   必須のプロパティであるhousingLocationを追加し、HousingLocationInfo型としてinput.required()を使って初期化します。

   housing-location.tsでinputプロパティを宣言する

   import {Component, input} from '@angular/core';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-housing-location',
     template: ` <p>housing-location works!</p> `,
     styleUrls: ['./housing-location.css'],
   })
   export class HousingLocation {
     housingLocation = input.required<HousingLocationInfo>();
   }
   

   親コンポーネントが値を必ず提供しなければならないことを示すために、inputのrequiredメソッドを呼び出す必要があります。例のアプリケーションでは、この値は設計上必ず渡されます。.required()を呼ぶことで、TypeScriptコンパイラがこの制約をチェックし、さらにテンプレートでコンポーネントが使用される際に、このプロパティを非nullとして扱います。

3. inputにデータを渡す

   HomeコンポーネントからHousingLocationコンポーネントのhousingLocationプロパティへhousingLocationの値を渡します。

   home.tsでHousingLocation用のinputプロパティを宣言する

   import {Component} from '@angular/core';
   import {HousingLocation} from '../housing-location/housing-location';
   import {HousingLocationInfo} from '../housinglocation';
   
   @Component({
     selector: 'app-home',
     imports: [HousingLocation],
     template: `
       <section>
         <form>
           <input type="text" placeholder="Filter by city" />
           <button class="primary" type="button">Search</button>
         </form>
       </section>
       <section class="results">
         <app-housing-location [housingLocation]="housingLocation" />
       </section>
     `,
     styleUrls: ['./home.css'],
   })
   export class Home {
     readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
   
     housingLocation: HousingLocationInfo = {
       id: 9999,
       name: 'Test Home',
       city: 'Test city',
       state: 'ST',
       photo: `${this.baseUrl}/example-house.jpg`,
       availableUnits: 99,
       wifi: true,
       laundry: false,
     };
   }