一个简单的Angular search UI实现

时间:2022-07-25
本文章向大家介绍一个简单的Angular search UI实现，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

搜索框通过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处：

随机文章
Javascript知识点必读
最近更新