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