為元件加入 input 參數

本教學課程示範如何建立元件的 input，並用它將資料傳入元件進行自訂。

你將學到什麼

你的應用程式的 HousingLocation 範本將會有一個 HousingLocation 屬性，用來接收輸入。

Input 概念預覽

Input讓元件能指定可以從父元件傳入的資料。

在這一課中，你會在 HousingLocation 元件中定義一個 input 屬性，讓你能自訂元件中顯示的資料。

進一步了解請參閱以 input 屬性接收資料與以 output 實現自訂事件指南。

1. 匯入 input() 函式

   在程式碼編輯器中，將 input 輔助方法從 @angular/core 匯入，並將 HousingLocationInfo 介面從 ../housinglocation 匯入 HousingLocation 元件。

   在 housing-location.ts 中匯入 input 與 HousingLocationInfo

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

   你必須在 input 上呼叫 required 方法，表示父元件一定要提供值。在我們的範例應用程式中，我們知道這個值一定會被傳入，這是刻意設計的。呼叫 .required() 能確保 TypeScript 編譯器強制執行這一點，並在範本中使用這個元件時，將該屬性視為不可為 null。

3. 將資料傳給 input

   將 housingLocation 值從 Home 元件傳給 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>
     `,
     styleUrl: './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,
     };
   }