Búsqueda de sitios web

javascript - Angular 2: ¿Qué es un alias @Input/@Output?

Mientras leía sobre @Input() y @Output() he encontrado que podemos usar un alias en lugar de usar el nombre de la propiedad para los decoradores.

Ejemplo

  class ProductImage {
    //Aliased
    @Input('myProduct') product: string;

    //Un-aliased
    @Input() product: string;//not aliased
  }

HTML

//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>

//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>

La documentación oficial de Angular dice:

A veces queremos que el nombre público de una propiedad de entrada/salida sea diferente al nombre interno. Esto ocurre frecuentemente con las directivas de atributos. Los consumidores de la directiva esperan vincularse al nombre de la directiva. Por ejemplo, cuando aplicamos una directiva con un selector myClick a una etiqueta, esperamos vincular a una propiedad de evento que también se llama myClick.

Y este tutorial lo explica brevemente:

un alias me permite sobrescribir el nombre de la propiedad para que sea el alias en lugar del nombre original de la propiedad

Aparte de eso, no he podido encontrar nada más sobre el aliasing de @Input() y @Output() en SO o a través de Google.

Cosas que me gustaría saber son:

  • ¿Qué intenta lograr el 'aliasing'?
  • ¿Es 'aliasing' algo que deberíamos usar regularmente?

Respuesta #1

Es como tu nombre y tu apodo.

Dentro de tu familia podrías ser llamado Nic, mientras que, fuera de tu familia, para que los demás te conozcan legalmente, deberías ser llamado Nicolas.

Entonces, si consideramos la clase de tu componente, el interior de tu familia:

@Component({
  selector:'my-component'
})
export class MyComponent{
   @Output('nicolas') nic  = new EventEmitter<any>();


   someFunction(){
    // because we're inside the family ( inside this class ), instead of nicolas , we can call nic like this : 

   this.nic ...... ( which you'd normally emit an event ).

  }

}

Pero desde afuera, todavía eres Nicolás, así que cuando alguien quiera llamarte (usa ese emisor de eventos) debería usar Nicolás;

 <my-component (nicolas)="onNicolasChanged($event)"></my-component>

Tenga en cuenta que no podemos hacer esto:

 <my-component (nic)="onNicolasChanged($event)"></my-component>

Esto está creando un alias de esa variable.

También, por favor lee mi respuesta aquí:

Respuesta #2

  • ¿Qué intenta lograr el 'aliasing'?

simplemente renombra la variable de entrada/salida según tus necesidades. Por ejemplo, si hay un objeto hero y cuando se selecciona se pasa a otro componente. En ese caso, sería apropiado llamarlo selectedHero. El aliasing simplemente logra eso.

@Input('selectedHero') hero: string;
  • ¿Es 'aliasing' algo que deberíamos usar regularmente?

Depende del contexto en el que estés trabajando. No es una necesidad. Por ejemplo, se puede usar para evitar conflictos en los nombres de variables o para la legibilidad del código.

Artículos relacionados