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

Question

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

我想从 searchview.ts 访问和修改 searchbar 对象的默认方法。 （例如，在 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()}
}