Come posso rendere visibile un input?

Question

Ho un componente con alcuni input che mi piacerebbe ricevere una notifica quando cambia. Attualmente sto lavorando implementando ngOnChanges e capendo quale input è stato modificato. Tuttavia, preferirei impostare la mia dichiarazione di input su @Input('select-values') selectValues:Observable<any>. Ciò mi permetterebbe di sottoscrivere qualsiasi nuovo cambiamento che si verifica in modo molto più pulito.

ngOnInit() { 
    this.selectValues.subscribe(() => console.log('yay!')); 
} 

Il problema è che sto ricevendo l'eccezione TypeError: this.selectValues.subscribe is not a function.

Appena scoperto che questo funziona anche - Component Interaction. Intercept input property changes with a setter.

Answer 1

Si possono avvolgere in una forma e ascoltare le modifiche

this.myForm = fb.group({ 
    'sku': ['', Validators.required] 
}); 

this.sku = this.myForm.controls['sku']; 

this.sku.valueChanges.subscribe( 
    (value: string) => { 
    console.log('sku changed to: ', value); 
    } 
); 

this.myForm.valueChanges.subscribe( 
    (value: string) => { 
    console.log('form changed to: ', value); 
    } 
); 

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

o

@Component({ 
    ..., 
    template: '<input (change)="onChange($event.target.value)">' 
}) 
class MyComponent { 
    this.inputChange =new Subject(); 

    onChange(e) { 
    this.inputChange.next(e); 
    } 
} 

Vedi anche questa questione aperta https://github.com/angular/angular/issues/4062

Answer 2

In realtà, non è possibile registrarsi direttamente contro associati osservabili d con eventi per elementi DOM. È necessario fare riferimento direttamente a un elemento DOM e utilizzare quindi il metodo fromEvent di Observable.

Ecco un esempio:

@Component({ 
    (...) 
    template: ` 
    <input #input /> 
    ` 
}) 
export class SomeComponent { 
    @ViewChild('input') 
    input:ElementRef; 

    ngAfterViewInit() { 
    var eventObservable = Observable.fromEvent(
       this.input.nativeElement, 'keyup'); 
    } 
} 

Questo problema potrebbe interessare anche:

• https://github.com/angular/angular/issues/4062

Detto questo è possibile sfruttare i controlli dei moduli per essere avvisato quando il valore di ingresso è aggiornato. L'attributo valueChanges del controllo può essere passato come input del componente secondario.

@Component({ 
    (...) 
    template: ` 
    <input [ngFormControl]='ctrl'/> 
    <child-component [select-values]="ctrl.valueChanges"></child-component> 
    ` 
}) 
export class SomeComponent { 
    constructor() { 
    this.ctrl = new Control(); 

    this.ctrl.valueChanges.subscribe(...); 
    } 
}