and - get set angular

Angular2 @Input a una propiedad con get/set

Question

Tengo un componente Angular2 en ese componente, actualmente tiene un montón de campos que tienen @Input () aplicado antes de ellos para permitir el enlace a esa propiedad, es decir

@Input() allowDay: boolean;

Lo que me gustaría hacer es vincularme a una propiedad con get / set, de modo que pueda hacer otra lógica en el setter, algo como lo siguiente

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
set allowDay(value: boolean) {
     this._allowDay = value;
     this.updatePeriodTypes();
}

¿Cómo haría esto en Angular2?

Según la sugerencia de Thierry Templier, lo cambié a, pero eso arroja el error No se puede vincular a ''allowDay'' ya que no es una propiedad nativa conocida:

//@Input() allowDay: boolean;
_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}
@Input(''allowDay'') set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Answer 1

@Paul Cavacas, tuve el mismo problema y lo resolví configurando el decorador Input() sobre el getter.

  @Input(''allowDays'')
  get in(): any {
    return this._allowDays;
  }

  //@Input(''allowDays'')
  // not working
  set in(val) {
    console.log(''allowDays = ''+val);
    this._allowDays = val;
  }

Vea este plunker: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview

Answer 2

Puede configurar el @Input en el setter directamente, como se describe a continuación:

_allowDay: boolean;
get allowDay(): boolean {
    return this._allowDay;
}

@Input(''allowDay'')
set allowDay(value: boolean) {
    this._allowDay = value;
    this.updatePeriodTypes();
}

Vea este plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview .

Answer 3

Respuesta aceptada actualizada a angular 7.0.1 en stackblitz aquí: https://stackblitz.com/edit/angular-inputsetter?embed=1&file=src/app/app.component.ts

directives ya no están en las opciones de decorador de componentes. Por lo tanto, he proporcionado una directiva secundaria al módulo de la aplicación.

gracias !

Answer 4

Si está interesado principalmente en implementar la lógica solo para el setter :

import { Component, Input, OnChanges, SimpleChanges } from ''@angular/core'';

// [...]

export class MyClass implements OnChanges {
  @Input() allowDay: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if(changes[''allowDay'']) {
      this.updatePeriodTypes();
    }
  }
}

La importación de SimpleChanges no es necesaria si no importa qué propiedad de entrada se modificó o si solo tiene una propiedad de entrada.

Doc angular: OnChanges

de otra manera:

private _allowDay: boolean;

@Input() set allowDay(value: boolean) {
  this._allowDay = value;
  this.updatePeriodTypes();
}
get allowDay(): boolean {
  // other logic
  return this._allowDay;
}