Question

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

我想访问＆amp;从searchview.ts修改searchbar对象的默认方法。（例如，在onClear（）内部，调用onCancel（）＆amp;导航到不同的视图）。这是我的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()}
}

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

1 个答案: