角度输入 .valueChanges.subscribe 值 - Javascript

当我们需要监听输入框或表单中的值时，可以使用Angular框架中的valueChanges方法来实现。该方法返回一个可观测对象，使用subscribe方法可以监听输入框或表单值的变化。

语法

yourFormOrInput.valueChanges.subscribe((value: any) => {
    // 监听输入框/表单值的变化并进行相关操作
});

解释

• valueChanges方法是Angular框架中的一个表单监听器，可以监听输入框和表单中的值变化。valueChanges方法返回的是一个可观测对象。
• subscribe方法用于订阅可观测对象并接收通知。
• 通过subscribe((value: any) => {...})方法获取输入框或表单值的变化，并在回调方法中进行相关操作。其中value变量保存了输入框或表单的当前值。

示例

下面是一个示例，通过监听输入框的变化来实现动态查询。当我们在输入框中输入关键词时，立即向服务器请求数据，并实时更新页面显示的结果。

import {Component, OnInit, OnDestroy} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Subscription} from 'rxjs';

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
    searchControl = new FormControl();
    subscription: Subscription;

    constructor() {}

    ngOnInit(): void {
        this.subscription = this.searchControl.valueChanges.subscribe(value => {
            console.log(`当前输入框的值为：${value}`);
            // 向服务器请求数据并更新显示
            // ...
        });
    }
    
    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }
}

在上面的例子中，我们通过valueChanges.subscribe方法监听输入框的值变化，并在控制台中输出当前值。请注意，在组件销毁时需要调用unsubscribe方法释放资源，以免内存泄漏。