Ionic 2 - 如何以编程方式编辑搜索栏值

Question

如何在 Ionic 2 中以编程方式修改离子搜索栏？我搜索了一段时间，没有找到任何解决方法。

我想从 searchview.ts 访问和修改搜索栏对象的默认方法。（例如，在 onClear() 内部，调用 onCancel() 并导航到不同的视图）。这是我的 html 文件中的搜索栏。

<ion-searchbar [showCancelButton]="true" (ionClear)="onClear()">
</ion-searchbar>

我想做类似的事情；

onClear(){
    var searchbar = this.searchbar // reference the search bar in the html file, but how do I get this?
    searchbar.onCancel();
    this.navigateToHome();
}

在此先感谢您的帮助！

编辑：添加了代码示例。将示例修改为从 onClear() 调用 onCancel()，而不是相反。

Answer 1

我想我不知道怎么问这个问题，我应该问你如何从控制器访问 html 中的 child component/view;

<ion-searchbar #mySearchBar (ionCancel)="onCancel()"></ion-searchbar>

然后像这样访问它；

@ViewChild('mySearchBar') searchbar:Searchbar;

并像这样使用它；

this.searchbar.ionCancel()

整个代码；

import { Component, ViewChild } from '@angular/core';
import { Searchbar } from 'ionic-angular';

export class DictionaryPage {
    @ViewChild('mySearchBar') searchbar:Searchbar;

    constructor(){
         this.searchbar.ionCancel()}
}

Ionic 2 - 如何以编程方式编辑搜索栏值

Ionic 2 - How To Edit Searchbar Values Programmatically

search

searchbar

ionic-framework

ionic2

angular