如何知道事件發射值在Angular 4中已更改？

Question

我正在開發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的更改嗎？

是否有任何函數可以知道該值已更改？ 請幫我解決這個問題。

Answer 1

您可以使valueFromSearch（）方法成為每次您從搜索中發出時都會調用的方法

DisplayComponent 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)})
}

Answer 2

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

Answer 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
}