Bileşene bir input parametresi ekleyin

Bu eğitim dersi, bir bileşen input'u oluşturmayı ve bileşeni özelleştirmek için ona veri aktarmayı gösterir.

Neler öğreneceksiniz

Uygulamanızın HousingLocation şablonunda girdi almak için bir HousingLocation özelliği bulunmaktadır.

Input'ların kavramsal önizlemesi

Input'lar bileşenlerin, bir üst bileşenden kendisine aktarılabilecek verileri belirtmesine olanak tanır.

Bu derste, HousingLocation bileşeninde, bileşende görüntülenen verileri özelleştirmenizi sağlayan bir input özelliği tanımlayacaksınız.

Daha fazla bilgi için Input özellikleriyle veri alma ve Output'larla özel olaylar kılavuzlarına bakın.

1. input() fonksiyonunu içe aktarın

   Kod editöründe, @angular/core paketinden input yardımcı metodunu HousingLocation bileşenine içe aktarın.

   Import input in housing-location.ts

   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 özelliğini ekleyin

   housingLocation adında zorunlu bir özellik ekleyin ve bunu HousingLocationInfo türüyle input.required() kullanarak başlatın.

   Declare the input property in housing-location.ts

   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>();
   }
   

   Üst bileşenin bir değer sağlaması gerektiğini belirtmek için input üzerinde required metodunu çağırmalısınız. Örnek uygulamamızda, bu değerin her zaman aktarılacağını biliyoruz -- bu tasarım gereğidir. .required() çağrısı, TypeScript derleyicisinin bunu zorunlu kılmasını ve bu bileşen bir şablonda kullanıldığında özelliği null olmayan olarak ele almasını sağlar.

3. Input'a veri aktarın

   housingLocation değerini Home bileşeninden HousingLocation bileşeninin housingLocation özelliğine gönderin.

   Declare the input property for HousingLocation in home.ts

   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,
     };
   }