如何知道 Angular 4 中事件发出的值已更改？答案

【问题标题】：How to know Event emitted value has been changed in Angular 4?如何知道 Angular 4 中事件发出的值已更改？
【发布时间】：2017-09-13 22:53:28
【问题描述】：

我正在开发一个 Angular 4 应用程序。我有一个搜索组件，用户在其中输入一个字符串。每当用户输入一个值并提交它时，我都会将该值从SearchComponent 发送到DisplayComponent。

在 SearchComponent 中发射值

@Output() userInput: EventEmitter<string> = new EventEmitter<string>();
onFormSubmit() {
    this.userInput.emit(this.searchForm.value.SearchInputValue);
}

DisplayComponent HTML 看起来像

<app-search (userInput)="valueFromSearch"></app-search>
<div class="some-other-html></div>

DisplayComponent TS 文件的样子

valueFromSearch: string;
constructor(private someService: SomeService) {}
ngOnInit() {
    this.someService.getSomeData(valueFromSearch)
       .subscribe((data) => {console.log("Success! data is ",data)},
       (error) => {console.log("Something went wrong", error)})
}

但是，当valueFromSearch 发生变化时，如何运行someService 函数？我应该使用 BehaviorSubject 继续监听 valueFromSearch 的变化吗？

是否有任何函数可以知道值已更改？请帮我解决这个问题。

【问题讨论】：

（更改）输入方法
@porgo 正在发出来自搜索输入的值，但我如何知道 DisplayComponent 中更改的值？

标签： javascript angular typescript observable

【解决方案1】：

您可以将 valueFromSearch() 设为每次从搜索发出时都会调用的方法

显示组件 HTML

<app-search (userInput)="valueFromSearch(value)"></app-search>
<div class="some-other-html></div>

DisplayComponent TS 文件

constructor(private someService: SomeService) {}
valueFromSearch(value: string) {
    this.someService.getSomeData(value)
       .subscribe((data) => {console.log("Success! data is ",data)},
       (error) => {console.log("Something went wrong", error)})
}

【讨论】：

【解决方案2】：

ngOnChanges(changes: any) {
    let data = changes.valueFromSearch.currentValue;
    // This only work with a change not if it has the same value.
}

【讨论】：

【解决方案3】：

不确定@JayDeeEss 的方法是否会立即生效，但对其稍作修改肯定是可行的。

按照他的建议，将valueFromSearch 设为一个方法（从您的组件中删除此声明：valueFromSearch: string;），每次userInput EventEmitter 发出一个新值时都会调用它。

DisplayComponent HTML（注意传递给valueFromSearch()的参数发生了变化；从(value)变为($event)）

<app-search (userInput)="valueFromSearch($event)"></app-search>
<div class="some-other-html></div>

DisplayComponent TS文件（在组件内部，参数名无所谓）

valueFromSearch(value: string) {
 // handle the changed 'value' based on required logic
}

【讨论】：