在Angular 7中,可以使用Reactive Forms(响应式表单)来实现按下回车键后返回先前输入的值的功能。下面是一个示例代码:
在组件的HTML模板中,添加一个响应式表单,并为输入框添加一个keydown事件监听器:
在组件的typescript文件中,定义一个表单组并创建响应式表单:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.myForm = this.fb.group({
inputValue: [''] // 初始化输入框的值为空字符串
});
}
onEnter() {
const inputValue = this.myForm.get('inputValue').value;
console.log('Previous value:', inputValue);
}
}
在上面的代码中,我们使用FormBuilder
来创建一个响应式表单。然后,在onEnter()
方法中,我们通过this.myForm.get('inputValue').value
获取输入框的值,并将其打印到控制台。
请确保在组件的app.module.ts
文件中导入并添加ReactiveFormsModule
:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
// ...
})
export class AppModule { }
这样,当用户在输入框中输入值后按下回车键,控制台将会打印出先前输入的值。