Get best of the week

Diferentes formas de pasar datos a componentes angulares

Hola Habr! Les presento la traducci贸n del art铆culo "Diferentes formas de pasar entradas a un componente en angular" por Netanel Basal.

imagen

En este art铆culo, analizaremos tres formas diferentes de transferir datos a un componente. En el siguiente ejemplo, utilizaremos select como el componente principal, pero los m茅todos utilizados en 茅l son relevantes en otros componentes.

Cree un componente de selecci贸n que reciba la siguiente entrada: tama帽o y ubicaci贸n .

Usando entradas


El primer m茅todo con el que todos estamos familiarizados es usar el decorador de entrada .

@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'
}

Y este c贸digo funciona muy bien, excepto que no es tan flexible. Por ejemplo, necesitamos establecer la variable de tama帽o en grande para cualquier selecci贸n en nuestra aplicaci贸n. Por lo tanto, debemos permitir que el cliente reescriba cualquier entrada globalmente.

Uso de la dependencia de inyecci贸n


Para hacer esto, podemos usar la funci贸n de inyecci贸n de dependencia angular.

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

Primero necesitamos crear una configuraci贸n de proveedor. Este proveedor se puede usar como token , tipo y tambi茅n establecer valores predeterminados para cada entrada . Usamos esto en nuestro componente seleccionado :

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

Ahora podemos reescribir las entradas seleccionadas a nivel de nuestra aplicaci贸n:

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

Pero eso no es todo. Tambi茅n podemos usar esto para pasar varias entradas a nivel de componente. Por ejemplo, tenemos un componente que usamos varias veces en la aplicaci贸n. En cada caso, necesitamos usar el valor peque帽o :

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

Podemos agregar esto al componente de proveedores y este valor se usar谩 para todos los componentes declarados y secundarios en las plantillas. Pero a煤n podemos reescribir esta variable directamente de la siguiente manera:

@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 {}

La misma estrategia se usa para m贸dulos perezosos porque crea una nueva inyecci贸n.

Usar directivas


Supongamos que tenemos componentes con mucha informaci贸n. Establecemos los mismos valores para la mayor铆a de ellos. En el ejemplo, se ver谩 as铆:

<!-- 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>

Podemos repetir estos valores, pero podemos crear una directiva que pasar谩 los valores necesarios de todas las variables:

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

Y podemos usar esta directiva donde necesitamos:

<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