在 ionic 2/3 中禁用离子搜索栏

【问题标题】：Disable ion-searchbar in ionic 2/3在 ionic 2/3 中禁用离子搜索栏
【发布时间】：2018-02-19 13:02:41
【问题描述】：

我想在 ionic 2/3 中禁用 ion-searchbar，以便只显示搜索栏，但我们不能输入任何内容。我添加了"disabled = true"，但这不起作用。

你能提出一些建议吗？

【问题讨论】：

看看这个问题在离子论坛也许它可能会有所帮助forum.ionicframework.com/t/how-to-set-ion-searchbar-to-disabled/…

标签： javascript angular ionic-framework ionic2 ionic3

【解决方案1】：

我可以通过 DOM 操作来做到这一点。代码如下：我创建了一个禁用搜索栏的函数

 disable() {
const inputs: any = document.getElementById("input").getElementsByTagName("INPUT");
inputs[0].disabled=true;
    }

您现在要做的就是创建一个 html ionsearch 栏并为其输入 id

 <ion-searchbar
id="input">
</ion-searchbar>

这是一个 DEMO

【讨论】：

【解决方案2】：

constructor(
        private renderer:Renderer) {

    }

    ngOnInit() {
        let input = this.searchBar.getElementRef().nativeElement.querySelector('input');
        this.renderer.setElementAttribute(input, 'disabled', 'true');
    }

上面的代码禁用了离子搜索栏。您只需将以下属性添加到搜索栏即可。

 <ion-searchbar #input> </ion-searchbar>

【讨论】：