Tamam, bu beni en çok heyecanlandıran özelliklerden biriydi çünkü çoğu zaman kendimi çok basit bir şeyi yapmak için çok fazla kod yazarken buluyorum: bir yönlendirici parametresi almak. Ne hakkında konuşuyorum? Bir örneğe bakalım.

Diyelim ki bir web uygulamamız var ve web uygulamasının bunun gibi bir yönlendirici parametresi seçeneği var https://myapp.com/contactForm?name=john&[email protected]ve bu parametreleri iletmek, iletişim formunu otomatik olarak doldurmamıza izin verecek. Bunu nasıl başarabiliriz?

Eski Yol

Angular 16'dan önce bunu nasıl yapacağımıza bir göz atalım.

import { CommonModule } from '@angular/common';
import { Component, OnDestroy } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-route-one',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
  // templateUrl: './route-one.component.html',
  template: `
    <form [formGroup]="contactForm" class="contactForm" (submit)="submit()">
      <input formControlName="firstName" type="text" />
      <input formControlName="email" type="email" />
      <textarea formControlName="comments"></textarea>
      <button>Submit</button>
    </form>
  `,
  styleUrls: ['./route-one.component.scss'],
})
export class RouteOneComponent implements OnDestroy {
  contactForm = new FormGroup({
    firstName: new FormControl(),
    email: new FormControl(),
    comments: new FormControl(),
  });

  private subscription = new Subscription();

  constructor(private route: ActivatedRoute) {
    this.subscription.add(
      route.queryParams.subscribe((params) => {
        const firstName = params['firstName'];
        const email = params['email'];
        const comments = params['comments'];

        if (firstName) this.contactForm.controls.firstName.setValue(firstName);
        if (email) this.contactForm.controls.email.setValue(email);
        if (comments) this.contactForm.controls.comments.setValue(comments);
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  submit() {
    console.log(this.contactForm.value);
  }
}

• firstName
• email
• comments

Yeni Yol

Bunu yazarken, Angular 16'nın mevcut sürümü 16.0.0-rc.2'dir ve kullanacağım sürüm bu. Tam olarak aynı işlevselliğe bir göz atalım. Buna girmeden önce, bunun işe yaraması için yapmanız gereken küçük bir şey var.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'route-one',
    loadComponent: () =>
      import('./route-one/route-one.component').then(
        (m) => m.RouteOneComponent
      ),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

import { CommonModule } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-route-one',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
  // templateUrl: './route-one.component.html',
  template: `
    <form [formGroup]="contactForm" class="contactForm" (submit)="submit()">
      <input formControlName="firstName" type="text" />
      <input formControlName="email" type="email" />
      <textarea formControlName="comments"></textarea>
      <button>Submit</button>
    </form>
  `,
  styleUrls: ['./route-one.component.scss'],
})
export class RouteOneComponent implements OnInit {
  @Input() firstName: string;
  @Input() email: string;
  @Input() comments: string;

  contactForm = new FormGroup({
    firstName: new FormControl(),
    email: new FormControl(),
    comments: new FormControl(),
  });

  ngOnInit(): void {
    if (this.firstName)
      this.contactForm.controls.firstName.setValue(this.firstName);
    if (this.email) this.contactForm.controls.email.setValue(this.email);
    if (this.comments)
      this.contactForm.controls.comments.setValue(this.comments);
  }

  submit() {
    console.log(this.contactForm.value);
  }
}

Bu bize 2 şekilde yardımcı olur

1. okuması kolay
2. Manuel olarak yönetmemiz gereken aboneliklerimiz olmaması için kodu temizler

Yine de ilk noktada küçük bir uyarı var ve bu, bu özelliği elde etmek için PR'da gündeme getirildi.

Girdi dekoratörü zaten değişkenleri bileşeninize iletmek için kullanılıyor, dolayısıyla bu, bileşen girişi ile sorgu parametreleri arasındaki suyu bulandırabilir. Bunun için önerilen düzeltme, sorgu parametrelerini bağlayan dekoratör için yeni bir ad oluşturmaktır. Umarım, bu düzeltme Angular 16'nın yayınlanmasından önce yapılır, ancak sanırım göreceğiz.

Bu makaleyi beğendiyseniz, bu makaleyi ve daha fazlasını okumak için web siteme gelin!