Detay sayfasını uygulamaya entegre edin

Bu eğitim dersi, ayrıntılar sayfasını uygulamanıza nasıl bağlayacağınızı gösterir.

Neler öğreneceksiniz

Bu dersin sonunda uygulamanız, ayrıntılar sayfasına yönlendirme desteğine sahip olacaktır.

Rota parametreleri ile yönlendirmenin kavramsal önizlemesi

Her konut konumunun, kullanıcı o öğe için ayrıntılar sayfasına gittiğinde görüntülenmesi gereken belirli ayrıntıları vardır. Bu hedefe ulaşmak için rota parametrelerini kullanmanız gerekecektir.

Rota parametreleri, rota URL'nizin bir parçası olarak dinamik bilgi eklemenizi sağlar. Kullanıcının hangi konut konumuna tıkladığını belirlemek için HousingLocation türünün id özelliğini kullanacaksınız.

1. Dinamik navigasyon için routerLink kullanın

   1. derste, src/app/routes.ts dosyasına rota parametresini tanımlayan özel bir segment içeren ikinci bir rota eklediniz, id:

   'details/:id'

   Bu durumda, :id dinamiktir ve rotanın kod tarafından nasıl istendiğine bağlı olarak değişecektir.

   1. src/app/housing-location/housing-location.ts dosyasında, section öğesine bir anchor etiketi ekleyin ve routerLink yönergesini dahil edin:

      Add anchor with a routerLink directive to housing-location.ts

      import {Component, input} from '@angular/core';
      import {HousingLocationInfo} from '../housinglocation';
      import {RouterLink} from '@angular/router';
      
      @Component({
        selector: 'app-housing-location',
        imports: [RouterLink],
        template: `
          <section class="listing">
            <img
              class="listing-photo"
              [src]="housingLocation.photo"
              alt="Exterior photo of {{ housingLocation().name }}"
              crossorigin
            />
            <h2 class="listing-heading">{{ housingLocation().name }}</h2>
            <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
            <a [routerLink]="['/details', housingLocation().id]">Learn More</a>
          </section>
        `,
        styleUrls: ['./housing-location.css'],
      })
      export class HousingLocation {
        housingLocation = input.required<HousingLocationInfo>();
      }
      

      routerLink yönergesi, Angular'ın router'ının uygulamada dinamik bağlantılar oluşturmasını sağlar. routerLink'e atanan değer, iki girişli bir dizidir: yolun statik kısmı ve dinamik veri.

      routerLink'in şablonda çalışması için, '@angular/router' paketinden RouterLink ve RouterOutlet'in dosya düzeyinde import'unu ekleyin, ardından bileşenin imports dizisini hem RouterLink hem de RouterOutlet'i içerecek şekilde güncelleyin.

   2. Bu noktada, uygulamanızda yönlendirmenin çalıştığını doğrulayabilirsiniz. Tarayıcıda, ana sayfayı yenileyin ve bir konut konumu için "Learn More" düğmesine tıklayın.

      

2. Rota parametrelerini alın

   Bu adımda, Details bileşeninde rota parametresini alacaksınız. Şu anda uygulama details works! görüntülüyor. Ardından, rota parametreleri kullanılarak aktarılan id değerini görüntülemek için kodu güncelleyeceksiniz.

   1. src/app/details/details.ts dosyasında, Details bileşeninde kullanacağınız fonksiyonları, sınıfları ve servisleri içe aktarmak için şablonu güncelleyin:

      Update file level imports

      import {Component, inject} from '@angular/core';
      import {ActivatedRoute} from '@angular/router';
      import {HousingService} from '../housing.service';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-details',
        template: `
          <article>
            <img
              class="listing-photo"
              [src]="housingLocation?.photo"
              alt="Exterior photo of {{ housingLocation?.name }}"
              crossorigin
            />
            <section class="listing-description">
              <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
              <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
            </section>
            <section class="listing-features">
              <h2 class="section-heading">About this housing location</h2>
              <ul>
                <li>Units available: {{ housingLocation?.availableUnits }}</li>
                <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
                <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
              </ul>
            </section>
          </article>
        `,
        styleUrls: ['./details.css'],
      })
      export class Details {
        route: ActivatedRoute = inject(ActivatedRoute);
        housingService = inject(HousingService);
        housingLocation: HousingLocationInfo | undefined;
      
        constructor() {
          const housingLocationId = Number(this.route.snapshot.params['id']);
          this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
        }
      }
      

   2. housingLocationId değerini görüntülemek için @Component dekoratörünün template özelliğini güncelleyin:

           template: `<p>details works! {{ housingLocationId }}</p>`,

   3. Details sınıfının gövdesini aşağıdaki kodla güncelleyin:

           export class Details {
              route: ActivatedRoute = inject(ActivatedRoute);
              housingLocationId = -1;
              constructor() {
              this.housingLocationId = Number(this.route.snapshot.params['id']);
              }
           }

      Bu kod, Details bileşenine geçerli rota hakkındaki verilere erişmenizi sağlayan ActivatedRoute router özelliğine erişim verir. constructor içinde, kod rotadan alınan id parametresini bir dizeden sayıya dönüştürür.

   4. Tüm değişiklikleri kaydedin.

   5. Tarayıcıda, konut konumlarından birinin "Learn More" bağlantısına tıklayın ve sayfada görüntülenen sayısal değerin, verilerdeki o konumun id özelliğiyle eşleştiğini doğrulayın.

3. Details bileşenini özelleştirin

   Artık yönlendirme uygulamada düzgün çalıştığına göre, Details şablonunu rota parametresi tarafından temsil edilen konut konumunun belirli verilerini görüntüleyecek şekilde güncellemek için harika bir zaman.

   Verilere erişmek için HousingService'e bir çağrı ekleyeceksiniz.

   1. Şablon kodunu aşağıdaki kodla eşleşecek şekilde güncelleyin:

      Update the Details template in src/app/details/details.ts

      import {Component, inject} from '@angular/core';
      import {ActivatedRoute} from '@angular/router';
      import {HousingService} from '../housing.service';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-details',
        template: `
          <article>
            <img
              class="listing-photo"
              [src]="housingLocation?.photo"
              alt="Exterior photo of {{ housingLocation?.name }}"
              crossorigin
            />
            <section class="listing-description">
              <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
              <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
            </section>
            <section class="listing-features">
              <h2 class="section-heading">About this housing location</h2>
              <ul>
                <li>Units available: {{ housingLocation?.availableUnits }}</li>
                <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
                <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
              </ul>
            </section>
          </article>
        `,
        styleUrls: ['./details.css'],
      })
      export class Details {
        route: ActivatedRoute = inject(ActivatedRoute);
        housingService = inject(HousingService);
        housingLocation: HousingLocationInfo | undefined;
      
        constructor() {
          const housingLocationId = Number(this.route.snapshot.params['id']);
          this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
        }
      }
      

      housingLocation özelliklerine isteğe bağlı zincirleme operatörü ? ile erişildiğine dikkat edin. Bu, housingLocation değeri null veya undefined ise uygulamanın çökmemesini sağlar.

   2. Details sınıfının gövdesini aşağıdaki kodla eşleşecek şekilde güncelleyin:

      Update the Details class in src/app/details/details.ts

      import {Component, inject} from '@angular/core';
      import {ActivatedRoute} from '@angular/router';
      import {HousingService} from '../housing.service';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-details',
        template: `
          <article>
            <img
              class="listing-photo"
              [src]="housingLocation?.photo"
              alt="Exterior photo of {{ housingLocation?.name }}"
              crossorigin
            />
            <section class="listing-description">
              <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
              <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
            </section>
            <section class="listing-features">
              <h2 class="section-heading">About this housing location</h2>
              <ul>
                <li>Units available: {{ housingLocation?.availableUnits }}</li>
                <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
                <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
              </ul>
            </section>
          </article>
        `,
        styleUrls: ['./details.css'],
      })
      export class Details {
        route: ActivatedRoute = inject(ActivatedRoute);
        housingService = inject(HousingService);
        housingLocation: HousingLocationInfo | undefined;
      
        constructor() {
          const housingLocationId = Number(this.route.snapshot.params['id']);
          this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
        }
      }
      

      Artık bileşen, seçilen konut konumuna göre doğru bilgileri görüntülemek için gereken koda sahiptir. constructor artık rota parametresini getHousingLocationById servis fonksiyonuna argüman olarak aktarmak için HousingService'e bir çağrı içermektedir.

   3. Aşağıdaki stilleri src/app/details/details.css dosyasına kopyalayın:

      Add styles for the Details

      .listing-photo {
        height: 600px;
        width: 50%;
        object-fit: cover;
        border-radius: 30px;
        float: right;
      }
      
      .listing-heading {
        font-size: 48pt;
        font-weight: bold;
        margin-bottom: 15px;
      }
      
      .listing-location::before {
        content: url('/public/location-pin.svg') / '';
      }
      
      .listing-location {
        font-size: 24pt;
        margin-bottom: 15px;
      }
      
      .listing-features > .section-heading {
        color: var(--secondary-color);
        font-size: 24pt;
        margin-bottom: 15px;
      }
      
      .listing-features {
        margin-bottom: 20px;
      }
      
      .listing-features li {
        font-size: 14pt;
      }
      
      li {
        list-style-type: none;
      }
      
      .listing-apply .section-heading {
        font-size: 18pt;
        margin-bottom: 15px;
      }
      
      label,
      input {
        display: block;
      }
      label {
        color: var(--secondary-color);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12pt;
      }
      input {
        font-size: 16pt;
        margin-bottom: 15px;
        padding: 10px;
        width: 400px;
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: solid 0.3px;
      }
      @media (max-width: 1024px) {
        .listing-photo {
          width: 100%;
          height: 400px;
        }
      }
      

      ve değişikliklerinizi kaydedin

   4. Details bileşeninde, az önce oluşturulan details.css dosyasını stillerin kaynağı olarak kullanın:

      Update details.ts to use the created css file

      import {Component, inject} from '@angular/core';
      import {ActivatedRoute} from '@angular/router';
      import {HousingService} from '../housing.service';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-details',
        template: `
          <article>
            <img
              class="listing-photo"
              [src]="housingLocation?.photo"
              alt="Exterior photo of {{ housingLocation?.name }}"
              crossorigin
            />
            <section class="listing-description">
              <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
              <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
            </section>
            <section class="listing-features">
              <h2 class="section-heading">About this housing location</h2>
              <ul>
                <li>Units available: {{ housingLocation?.availableUnits }}</li>
                <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
                <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
              </ul>
            </section>
          </article>
        `,
        styleUrls: ['./details.css'],
      })
      export class Details {
        route: ActivatedRoute = inject(ActivatedRoute);
        housingService = inject(HousingService);
        housingLocation: HousingLocationInfo | undefined;
      
        constructor() {
          const housingLocationId = Number(this.route.snapshot.params['id']);
          this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
        }
      }
      

   5. Tarayıcıda sayfayı yenileyin ve belirli bir konut konumu için "Learn More" bağlantısına tıkladığınızda, ayrıntılar sayfasının seçilen öğenin verilerine göre doğru bilgileri görüntülediğini doğrulayın.

   

4. Home bileşeninde navigasyonu kontrol edin

   Önceki bir derste, App şablonunu bir routerLink içerecek şekilde güncellediniz. Bu kodu eklemek, logoya her tıklandığında Home bileşenine geri navigasyon yapılmasını sağlamak için uygulamanızı güncelledi.

   1. Kodunuzun aşağıdakiyle eşleştiğini doğrulayın:

      Confirm the routerLink in app.ts

      import {Component} from '@angular/core';
      import {Home} from './home/home';
      import {RouterLink, RouterOutlet} from '@angular/router';
      
      @Component({
        selector: 'app-root',
        imports: [Home, RouterLink, RouterOutlet],
        template: `
          <main>
            <a [routerLink]="['/']">
              <header class="brand-name">
                <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
              </header>
            </a>
            <section class="content">
              <router-outlet />
            </section>
          </main>
        `,
        styleUrls: ['./app.css'],
      })
      export class App {
        title = 'homes';
      }
      

      Kodunuz zaten güncel olmalı ama emin olmak için doğrulayın.

Artık şunları biliyorsunuz:

• bir rotaya veri aktarmak için rota parametrelerini kullanma
• bir rota oluşturmak için dinamik veri kullanmak üzere routerLink yönergesini kullanma
• HousingService'ten belirli konut konumu bilgilerini görüntülemek için rota parametresi kullanma.

Şimdiye kadar gerçekten harika iş çıkardınız.

Bu derste ele alınan konular hakkında daha fazla bilgi için: