搜索框通過Input控件實現：

import {Component, EventEmitter, OnInit, Output} from '@angular/core';@Component({selector: 'app-search-input',templateUrl: './search-input.component.html',styleUrls: ['./search-input.component.css'] }) export class SearchInputComponent implements OnInit {isSearching = true;// 通過EventEmitter發送一個事件，參數類型為string@Output() searchEventEmitter = new EventEmitter<string>();bookName: string;constructor() { }ngOnInit() {// this.searchEventEmitter.emit('jerry');}}

html：把Input field的值(ngModel)通過searchEventEmitter.emit發送出去：

在消費這個Component的html處：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的一个简单的Angular search UI实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。