禁用编辑不起作用答案

【问题标题】：Disable edit is not working禁用编辑不起作用
【发布时间】：2018-01-20 13:06:49
【问题描述】：

我正在使用ion-searchbar，我需要禁用ion-searchbar 的编辑模式。

我的代码 sn-p -

<ion-searchbar  [disabled]="true"  style="padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>

但是上面的代码没有按预期工作。

【问题讨论】：

【解决方案1】：

请使用css属性pointer-events: none;，我修改了你的代码。请用下面的替换它

<ion-searchbar  style="pointer-events: none;padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>

【讨论】：

【解决方案2】：

搜索栏上的禁用属性未传递给内部input 元素。我想我们可以破解 ViewChildren 的 DOM 视图 ViewChild ...

但也有一种方法可以利用 Ganesh Pediredla 的想法，实现一种基于 pointer-events CSS 属性启用/禁用组件的方法。

使用属性来启用或禁用声明 pointer-events: none;padding: 的 CSS 类

HTML

<ion-searchbar [ngClass]="{ 'no-pointer-events': disableSearchbar }" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>

CSS

.no-pointer-events {
    pointer-events: none;
}

组件

public disableSearchbar: boolean = true;

toggleSearchbar(status: boolean): void {
    this.disableSearchbar = !this.disableSearchbar;
}

【讨论】：