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

您可以将Header组件模板上的input事件绑定到Header组件类。

在您的header.component.html上，

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

在你的头上。component.ts，

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

这将确保每当用户在Header组件的输入上键入任何内容时，服务中的messageSource(它是BehaviorSubject(属性都将包含输入文本值。

Answer 2

因此绑定非常简单。在每个击键的头部组件中，只需发出BehaviourSubject，只要订阅了该主题的可观察内容，就可以了解更改。

在标题html中

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

在头文件中

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

}