在ionic 3中需要搜索列表作为弹出窗口

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-search-list',
  template: `
    <ion-searchbar [(ngModel)]="searchKeyword"></ion-searchbar>
    <ion-list>
      <ion-item *ngFor="let item of filteredList">{{ item }}</ion-item>
    </ion-list>
  `
})
export class SearchListComponent {
  @Input() list: string[];
  searchKeyword: string;
  filteredList: string[];

  constructor() { }

  ngOnChanges() {
    this.filterList();
  }

  filterList() {
    this.filteredList = this.list.filter(item => item.includes(this.searchKeyword));
  }
}

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { SearchListComponent } from '../search-list/search-list.component';

@Component({
  selector: 'app-home',
  template: `
    <ion-button (click)="openModal()">打开弹出窗口</ion-button>
  `
})
export class HomePage {
  list: string[] = ['Apple', 'Banana', 'Orange', 'Mango'];

  constructor(private modalController: ModalController) { }

  async openModal() {
    const modal = await this.modalController.create({
      component: SearchListComponent,
      componentProps: {
        list: this.list
      }
    });
    return await modal.present();
  }
}