Angular Route Parametrelerine Reactive olarak Erişmek (Component’ in tekrar yüklenmemesi)

Angular uygulamaları geliştirirken, aynı route pattern’ i ve aynı component’ i kullanan linkler arasında geçiş yaptığınızda, component‘ in tekrar tekrar yüklenmediğini farkedeceksiniz. Bunu ilk farkettiğiniz an tahminen, kategori vb. gibi pagination kullanan component’ ler olacaktır. Url değişmiş lakin yeni data yüklenmemiş 🙂
Sebebi çok basit, Angular route değişikliklerinde, değişikliği url kısmında hemen uygular. Lakin route değiştiğinde, route tanımlamalarına göre kullanılan component değişmiyor ise, component’ i tekrardan initiate etmez. Bu bir performans stratejisidir.

Peki ne olacak ? işleri nasıl olması gerektiği gibi yürüteceğiz ? sorusuna cevabı, ActivatedRoute.params objesinin observable metodu olan subscribe veriyor. Subscribe metodu sayesinde, route da gerçekleşen her değişiklik anında bize bildiriliyor.

Uygulama Senaryosu;

• https://gelistir.net/509/angular-route-parametrelerine-erismek/ adresindeki uygulamayı kullanacağız. Ürün sayfasında diğer isimli bir link olacak ve route değerinde diğer ürünün id’ si olacak, bu sayede, route değişecek ama component sıfırdan oluşturulmayacak. subscribe metodu içerisinde, yeni id’ yi alıp işlemleri gerçekleştireceğiz. ProductComponent’ e ilk girdiğimizde o anki saati yazdırıcaz, route değişmesine rağmen, saat değişmeyecek.

Product Component Template;

<p>Zaman : {{ date | date:'HH:mm:ss' }}</p>

<h1>{{product.name}}</h1>

<ul>
<li *ngFor="let otherProduct of products">
    <ng-container *ngIf="otherProduct.id != product.id">
        <a [routerLink]="['/product', otherProduct.id]">
            <h3>{{otherProduct.name}}</h3>
        </a>    
    </ng-container>
</li>
</ul>

• Ürün bilgisinin altında, tüm ürünleri listelemek için ngFor döngüsü başlatıyoruz, lakin halihazırda listelenen ürünü pas geçiyoruz. Bu sayede her seferinde, sadece diğer ürün altta listeleniyor. En üstte, component içinde set ettiğimiz saat bilgisi var. Component sıfırdan oluşturulmadığı için, route değişsede saat değişmiycek.

ProductComponent;

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

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

  id: number;
  product: object;

  date = new Date();

  products = [
    {
      id: 0,
      name : 'telefon'
    },
    {
      id: 1,
      name : 'tablet'
    }
  ];

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.product = this.products[this.id];

    this.route.params.subscribe(
      (params: Params) => {
        this.id = params['id'];
        this.product = this.products[this.id];
      }
    );

  }

}

• constructor’ da route değişkenine set ettiğimiz ActivatedRoute objesinin params objesi’ nin subscribe metodu içinde route parametre değişikliklerine abone olduk. Değişiklikleri params dizisi ile alıp, uyguluyoruz. Her route değişiminde, subscribe metodu tetikleniyor ve değişiklikleri tekrar tekrar uyguluyoruz.

CANLI ÖRNEK;