Как я могу сделать вход видимым?

У меня есть компонент с несколькими входами, которые я бы хотел получить, когда он изменится. В настоящее время я работаю, реализуя ngOnChanges и выясняя, какой вход был изменен. Тем не менее, я бы предпочел включить мое объявление ввода в @Input('select-values') selectValues:Observable<any>. Это позволило бы мне подписаться на любые новые изменения, которые происходят более чистым способом.

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

Проблема с этим в том, что я получаю исключение TypeError: this.selectValues.subscribe is not a function.

Просто выяснилось, что это тоже работает - Взаимодействие компонентов. Изменяется входное свойство перехвата с установщиком.

Ответ 1

Вы можете обернуть их в форму и прослушать изменения

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/

или

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

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

См. также эту проблему open https://github.com/angular/angular/issues/4062

Ответ 2

На самом деле, невозможно напрямую зарегистрировать на наблюдаемые элементы, связанные с событиями для элементов DOM. Вам нужно напрямую ссылаться на элемент DOM и использовать метод fromEvent Observable.

Вот пример:

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

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

Этот вопрос может вас заинтересовать:

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

Тем не менее, вы можете использовать средства управления формой, чтобы получать уведомления при обновлении значения ввода. Атрибут valueChanges элемента управления может быть передан как вход субкомпонента.

@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(...);
  }
}