ठीक है, यह उन विशेषताओं में से एक थी जिसके बारे में मैं सबसे अधिक उत्साहित था क्योंकि मैं अक्सर खुद को कुछ बहुत ही सरल करने के लिए बहुत सारे कोड लिखता हुआ पाता हूं: एक राउटर परम प्राप्त करें। मैं किस बारे में बात कर रहा हूं? आइए एक उदाहरण देखें।

मान लें कि हमारे पास एक वेब ऐप है, और वेब ऐप में राउटर परम के लिए इस तरह का विकल्प है https://myapp.com/contactForm?name=john&[email protected], और इन मापदंडों को पास करने से हमें संपर्क फॉर्म में ऑटो-फिल करने की अनुमति मिल जाएगी। हम इसे कैसे पूरा कर सकते हैं?

पुराना तरीका

आइए देखें कि एंगुलर 16 से पहले हम इसे कैसे करेंगे।

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

नया तरीका

इसे लिखते समय, Angular 16 का वर्तमान संस्करण 16.0.0-rc.2 है, और यही वह संस्करण है जिसका मैं उपयोग करूंगा। आइए ठीक उसी कार्यक्षमता पर एक नज़र डालते हैं। इससे पहले कि हम इसमें शामिल हों, इसके काम करने से पहले आपको एक छोटी सी चीज करने की जरूरत है।

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

यह हमें 2 तरह से मदद करता है

1. इसे पढ़ना आसान है
2. यह कोड को साफ करता है इसलिए हमारे पास सदस्यता नहीं है जिसे हमें मैन्युअल रूप से प्रबंधित करना है

हालांकि, पहले बिंदु पर एक छोटी सी चेतावनी है, और इस सुविधा को प्राप्त करने के लिए इसे पीआर में लाया गया था।

इनपुट डेकोरेटर पहले से ही आपके घटक में चर पारित करने के लिए उपयोग किया जाता है, इसलिए यह घटक इनपुट और क्वेरी पैरामीटर के बीच पानी को खराब कर सकता है। इसके लिए सुझाया गया फिक्स डेकोरेटर के लिए एक नया नाम बनाना है जो क्वेरी पैरामीटर को बांधता है। उम्मीद है, यह सुधार Angular 16 के रिलीज़ होने से पहले हो जाएगा, लेकिन मुझे लगता है कि हम देखेंगे।

अगर आपको यह लेख अच्छा लगा हो, तो इस लेख और अन्य चीजों को पढ़ने के लिए मेरी वेबसाइट पर आएं!