以下是一个使用Angular Material实现带有清除按钮的跨浏览器搜索输入框的代码示例:
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
Search
import { Component } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent {
searchTerm: string = '';
onSearchInput() {
// 在这里执行搜索操作
console.log('Search term:', this.searchTerm);
}
clearSearchTerm() {
this.searchTerm = '';
}
}
这样,你就可以在Angular Material的搜索输入框中实现一个带有清除按钮的跨浏览器搜索输入框。当用户在输入框中输入内容时,搜索操作将被执行,并且当用户点击清除按钮时,搜索框中的内容将被清除。