Question

我正在使用ion-searchbar，我需要停用ion-searchbar的修改模式。

我的代码段 -

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

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

Answer 1

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

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

Answer 2

搜索栏上的禁用属性未传递给内部input元素。我想我们可以破解ViewChild的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;
}