Компонент не подписывается на Observable

Question

У меня есть то, что я считаю очень простой настройкой.Компонент A отображает компонент B.

Компонент A предоставляет Subject и в своем шаблоне передает тему (используя асинхронный канал) одному из свойств компонента B:

@Component({
  template: "
    <div><app-comp-b [input]='s | async'></app-comp-b></div>
  "
})
class CompA {
  s: BehaviorSubject<string> = new BehaviorSubject<string>('');
  change(newS: string) { this.s.next(newS); }
}  

class CompB {
  @Input() input: string;
}

По какой-то причине, B получает только начальное значение s.Последующие вызовы change (которые создают новое значение в s) не влияют на B. То есть значение input не изменяется (например, если я отображаю его в шаблоне B.)

Если я подпишусь вручную на s, например, s.subscribe(ss => console.log(ss));, я смогу увидеть значения по мере их появления, напечатанные в консоли.

Более того, если я использую pipe и tap для печати значений ничего не происходит, пока я не подпишусь вручную.Это намекает мне на то, что Comp B не подписывается на s.

Что я делаю не так?(Я использую угловой 4.4.7)

Answer 1

Благодаря примеру @SiddAjmera я нашел проблему.

В моем коде функция change() не вызывается кнопкой, а вызывается событием, запущенным из другого компонента.Когда я использую кнопку, она начинает работать!

Итак, я добавил вызов к detectChanges, и теперь он работает и с события.

Я новичок в Angular, но если я правильно понимаю, Angular не обнаруживает изменения, поскольку ссылка на Subject s не изменяется.Вместо этого оно обновляется новым значением.Таким образом, мы должны принудительно обнаружить изменения.

Чтобы добавить detectChanges, я ввел детектор изменений в c'or of comp A и вызвал обнаружение изменений в change:

class CompA {
  constructor(private cd: ChangeDetectorRef) {}

  s: BehaviorSubject<string> = new BehaviorSubject<string>('');

  change(newS: string) { 
    this.s.next(newS);
    this.cd.detectChanges();
  }
}