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 中的子组件/视图;

<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()}
}