Невозможно установить данные подписки BehaviorSubject - PullRequest
Новая
       55

Невозможно установить данные подписки BehaviorSubject

0 голосов
/ 18 января 2020

Попытка с BehaviorSubject и 2 компонентами. Но не удается настроить получение данных от подписки.

Компоненты A 

name:string = 'Test';
  constructor( private data: DataService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(val => this.name = val);
  }

Компонент B (с текстовым полем) 

name:string = 'Test';
  frm:FormGroup;
  constructor(private fb: FormBuilder, private data: DataService) { }
  ngOnInit() {
    this.setup();
    this.data.currentMessage.subscribe(val => this.name = val);
  }
  setup(){
    this.frm = this.fb.group({
      name:['']
    });
  }
  setData(){
    this.data.changeMessage(this.frm.get('name').value);
  }

при отправке формы вызывается функция setData ().

Служба данных 

private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();
  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

На нагрузке:

enter image description here

При отправке формы:

enter image description here

Значение изменяется в компоненте B, но не в A. Что плохого в A, что оно не меняется? Пожалуйста, помогите.

1 Ответ

0 голосов
/ 18 января 2020

Ваш сервис не является синглтоном . Вы должны предоставить его на уровне модуля или на уровне root, чтобы сделать его общим сервисом или singleton сервисом.

Предоставление сервиса на компоненте Уровень создаст новый экземпляр, который доступен только этому компоненту.

Вы можете предоставить услугу на уровне root следующим образом или из массив провайдеров в файле модуля .

data.service 

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();
  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Также удалите массив провайдеров из файлов компонентов A и B, поскольку мы предоставляем на root уровень

Comp A 

@Component({
  selector: 'app-comp-a',
  templateUrl: './comp-a.component.html',
  styleUrls: ['./comp-a.component.css'],
  // providers: [DataService]
})

Comp B 

@Component({
  selector: 'app-comp-b',
  templateUrl: './comp-b.component.html',
  styleUrls: ['./comp-b.component.css'],
  // providers: [DataService]
})

Forked Demo

...