BehaviorSubject для отслеживания входного значения в реальном времени по компонентам

Question

У меня есть BehaviorSubject, который работает при нажатии кнопки, но я пытаюсь выяснить, как ввести поле ввода в компоненте заголовка и вывести его в реальном времени в компоненте вывода на странице, не нажимая кнопкупередавать. Он должен просто передавать, как я печатаю. Любая помощь приветствуется!

search.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SearchService{
private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();
  constructor(){ }
  changeMessage(message: string){
    this.messageSource.next(message);
  }
}

header.ts

import { Component, OnInit, Input } from '@angular/core';

import { SearchService } from './search.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy{
  message: string;
  searchField: string;
  constructor( private searchService: SearchService ) { }




  ngOnInit(){

    this.searchService.currentMessage.subscribe(message => this.message = message);
  }




newMessage() {
  this.searchService.changeMessage(this.searchField);
}

  }

Компонент вывода

import { SearchService } from '../header/search.service';


@Component({
  selector: 'app-output',
  templateUrl: './output.component.html',
  styleUrls: ['./output.component.css']
})
export class OutputComponent implements OnInit {

  message: string;

  constructor(private searchService: SearchService) { }

  ngOnInit() {


      this.searchService.currentMessage.subscribe(message => this.message = message);

  }

Answer 1

Вы можете привязать событие input в шаблоне компонента Header к классу компонентов Header.

В вашем header.component.html,

<input (input)="onInput($event)"/>

И в вашем заголовке. component.ts,

onInput(event) {
  const { value } = event.target;
  // console.log(value);
  this.searchService.changeMessage(value);
}

Это гарантирует, что свойство messageSource (которое является BehaviorSubject) в вашем сервисе будет содержать входные текстовые значения каждый раз, когда пользователь вводит что-либо на входе на вашем устройстве. Заголовочный компонент.

Answer 2

Так что это довольно просто связать. В вашем компоненте заголовка при каждом нажатии клавиши просто создайте объект BehaviourSubject, и, где бы он ни наблюдался для этого субъекта, вы узнаете об изменениях.

в заголовке html

<input (input)="onChange($event.target.value)"/>

в заголовочном файле

onChange(value) {
this.searchService.changeMessage(value);

}