Ok, das war eine der Funktionen, auf die ich mich am meisten gefreut habe, weil ich oft viel Code schreibe, um etwas sehr Einfaches zu tun: einen Router-Parameter zu bekommen. Wovon rede ich? Schauen wir uns ein Beispiel an.

Nehmen wir an, wir haben eine Web-App, und die Web-App hat die Option für einen Router-Parameter wie diesen https://myapp.com/contactForm?name=john&[email protected], und das Übergeben dieser Parameter würde es uns ermöglichen, das Kontaktformular automatisch auszufüllen. Wie könnten wir das erreichen?

Der alte Weg

Werfen wir einen Blick darauf, wie wir das vor Angular 16 machen würden.

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

Der neue Weg

Zum Zeitpunkt des Schreibens ist die aktuelle Version von Angular 16 16.0.0-rc.2, und das ist die Version, die ich verwenden werde. Werfen wir einen Blick auf genau die gleiche Funktionalität. Bevor wir darauf eingehen können, gibt es eine kleine Sache, die Sie tun müssen, damit dies funktioniert.

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

Dies hilft uns in zweierlei Hinsicht

1. Es ist leicht zu lesen
2. Es bereinigt den Code, sodass wir keine Abonnements haben, die wir manuell verwalten müssen

Es gibt jedoch eine kleine Einschränkung zum ersten Punkt, und dies wurde in der PR angesprochen, um diese Funktion zu erhalten.

Der Input-Decorator wird bereits zum Übergeben von Variablen an Ihre Komponente verwendet, sodass dies das Wasser zwischen Komponenteneingabe und Abfrageparametern trüben kann. Die vorgeschlagene Lösung hierfür besteht darin, einen neuen Namen für den Decorator zu erstellen, der die Abfrageparameter bindet. Hoffentlich wird dieser Fix vor der Veröffentlichung von Angular 16 eingeführt, aber ich denke, wir werden sehen.

Wenn Ihnen dieser Artikel gefallen hat, besuchen Sie meine Website, um diesen Artikel und mehr zu lesen!