Get best of the week

Verschiedene Möglichkeiten, Daten an Angular-Komponenten zu übergeben

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels „Verschiedene Möglichkeiten, Eingaben an eine Komponente im Winkel zu übergeben“ von Netanel Basal.

Bild

In diesem Artikel werden drei verschiedene Arten der Datenübertragung auf eine Komponente analysiert. Im folgenden Beispiel verwenden wir select als Hauptkomponente, aber die darin verwendeten Methoden sind in anderen Komponenten relevant.

Erstellen Sie eine ausgewählte Komponente , die die folgenden Eingaben erhält - Größe und Platzierung .

Eingaben verwenden


Die erste Methode, mit der wir alle vertraut sind, ist die Verwendung des Eingabe- Dekorators .

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() placement: 'top' | 'bottom' | 'right' | 'left'  = 'bottom'
}

Und dieser Code funktioniert großartig, außer dass er nicht so flexibel ist. Zum Beispiel müssen wir die eingestellte Größe variabel zu groß für jede Auswahl in unserer Anwendung. Daher müssen wir dem Client erlauben, alle Eingaben global neu zu schreiben.

Verwenden der Injektionsabhängigkeit


Zu diesem Zweck können wir die Angular Dependency Injection-Funktion verwenden.

import { InjectionToken, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SelectConfig {
  size: 'sm' | 'md' | 'lg' = 'md'
  placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom';
}

export function setSelectConfig(config: Partial<SelectConfig>) {
  return {
    ...new SelectConfig(),
    ...config
  }
}

Zuerst müssen wir eine Anbieterkonfiguration erstellen. Dieser Anbieter kann als Token , Typ und Standardwert für jede Eingabe verwendet werden . Wir verwenden dies in unserer ausgewählten Komponente :

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: SelectConfig['size'];
  @Input() placement: SelectConfig['placement'];

  constructor(private config: SelectConfig) {
    this.size = config.size;
    this.placement = config.placement;
  }
}

Jetzt können wir die ausgewählten Eingaben auf der Ebene unserer Anwendung neu schreiben:

@NgModule({
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'lg'
      })
    }
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

Aber das ist nicht alles. Wir können dies auch verwenden, um verschiedene Eingaben auf Komponentenebene zu übergeben. Zum Beispiel haben wir eine Komponente, die wir mehrmals in der Anwendung verwenden. In jedem Fall müssen wir den kleinen Wert verwenden :

@Component({
  selector: 'app-todos-page',
  template: `<app-select></app-select>`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

Wir können dies zur Anbieterkomponente hinzufügen, und dieser Wert wird für alle in den Vorlagen deklarierten und untergeordneten Komponenten verwendet. Wir können diese Variable jedoch direkt wie folgt umschreiben:

@Component({
  selector: 'app-todos-page',
  template: `
   <app-select></app-select>
   <app-select size="lg"></app-select>
`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

Die gleiche Strategie wird für faule Module verwendet, da dadurch eine neue Injektion erzeugt wird.

Direktiven verwenden


Angenommen, wir haben Komponenten mit viel Input. Wir stellen für die meisten die gleichen Werte ein. Im Beispiel sieht es so aus:

<!-- It can be in the same template or in different places in the app -->
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right  inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>

Wir können diese Werte wiederholen, aber wir können eine Direktive erstellen, die die erforderlichen Werte aller Variablen übergibt:

@Directive({
  selector: '[selectConfigOne]',
  providers: [{
    provide: SelectConfig,
    useValue: setSelectConfig({
      size: 'lg',
      placement: 'right',
      inputThree: 'someValue'
    })
  }]
})
export class SelectConfigOneDirective {}

Und wir können diese Richtlinie dort verwenden, wo wir sie brauchen:

<h1>Using Inputs</h1>
<app-select size="lg"></app-select>
<app-select placement="top"></app-select>

<h1>Using a Directive</h1>
<app-select selectConfigOne></app-select>

<app-todos-page></app-todos-page>

More articles:


All Articles