example - Angular 2/TypeScript: @ Input/@ output o input/output?

output angular 4

Question

Mientras realizamos un curso en Udemy, hemos permitido que los componentes pasen datos dy usando el @Input() en la clase de componente.

Mientras leo en ngBook-2, he encontrado que hay otro enfoque al usar la propiedad de input dentro de un decorador @Component .

ESTA pregunta similar en SO, una persona respondió:

Una ventaja del uso de entradas es que los usuarios de la clase solo necesitan mirar el objeto de configuración pasado al decorador @Component para encontrar las propiedades de entrada (y salida).

y mire a través de documentación que:

Ya sea que use entradas / salidas o @ Input / @ Output, el resultado es el mismo, por lo que elegir cuál usar es en gran medida una decisión estilística.

Realmente, la información más útil sobre esto es mayormente conflictiva dependiendo de dónde mires.

Inside @Component

 @Component({
  selector: ''product-image'',
  inputs: [''product''],
  template: `
  <img class="product-image" [src]="product.imageUrl">
})

class ProductImage {
  product: Product;
}

Clase interior

@Component({
  selector: ''product-image'',
  template: `
  <img class="product-image" [src]="product.imageUrl">
})

class ProductImage {
  @Input() product: Product;
}

Cosas que me gustaría saber

• ¿Cuál sería más uso de "mejores prácticas"?
• ¿Cuándo usarías uno sobre el otro?
• ¿Hay alguna diferencia en absoluto?

Answer 1

Una de las mejores cosas que sé que puedes hacer con decoradores, pero no lo estoy si es posible con el otro modo, es aliasing la variable:

export class MyComponent {

 @Output(''select'') $onSelect = new EventEmitter<any>(); // this is aliased

 @Output() finish  = new EventEmitter<any>(); // not aliased

 sendUp(){
    this.$onSelect.emit(''selected''); 

    this.finish.emit(''done'');
 }
}

y luego desde afuera:

 <my-component (select)="doSomething($event)"></my-component>

El otro establece un valor predeterminado, puede establecer el valor predeterminado en ambos sentidos, pero los decoradores parecen más prácticos y tienen menos código.

@Component({ 
  selector:''my-component''
})
export class MyComponent {
  @Input() id = ''default-id'';     

  ngOnInit(){

    console.log(''id is : '',this.id); // will output default-id if you don''t pass anything when using the component
  }
}

Entonces, en este caso, si el consumidor no pasa la identificación como entrada, usted todavía tiene la identificación por defecto ;

 <my-component></my-component>;

Donde, si quisieras hacer esto con una matriz de entradas, harías:

@Component({ 
  selector:''my-component'',
  inputs:[''id'']
})
export class MyComponent {
  private id = ''default-id'';     

  ngOnInit(){

    console.log(''id is : '',this.id); // will output default-id if you don''t pass anything when using the component
  }
}

El resultado es el mismo, pero si lo nota, en este caso debe colocar el ID en la matriz de entradas y definirlo dentro de la clase.

EDITAR:

Aparentemente aliasing con outputs [] también es posible, como por ejemplo:

@Component({
  selector: ''my-component'',
  template: `
   <button (click)="sendUp()">Send up</button>
  `,
  outputs: [''$onSelect: select'']
})
export class ChildComponent {
  $onSelect = new EventEmitter<any>(); // this is aliased

  sendUp() {
    this.$onSelect.emit(''selected'');
  }
}

Pero nuevamente hay que definirlo en dos lugares, en la matriz y en la clase, así que preferiría los decoradores.

Answer 2

Guía de estilo angular 2

De acuerdo con la guía oficial de estilo Angular 2 , ESTILO 05-12 dice

Utilice @Input y @Output lugar de las propiedades de entradas y salidas de los decoradores @Directive y @Component

El beneficio es que (de la guía):

• Es más fácil y más legible identificar qué propiedades de una clase son entradas o salidas.
• Si alguna vez necesita cambiar el nombre de la propiedad o el nombre del evento asociado con @Input o @Output , puede modificarlo en un solo lugar.
• La declaración de metadatos adjunta a la directiva es más corta y, por lo tanto, más legible.
• Colocar el decorador en la misma línea hace que el código sea más corto y aún así identifica fácilmente la propiedad como una entrada o salida.

Personalmente he usado este estilo y realmente lo aprecio ayudando a mantener el código SECO .