Отключить редактирование не работает

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 : none; Я изменил ваш код. Пожалуйста, замените его ниже

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

Answer 2

Атрибут disable на панели поиска не передается на внутренний input элемент. Я думаю, мы могли бы взломать DOM View ViewChild of ViewChildren...

Но есть также способ использовать идею Ганеша Педиредла и реализовать метод для включения / выключения компонента на основе pointer-events CSS свойство

Используйте свойство, чтобы включить или отключить объявление класса CSS pointer-events: none;padding:

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;
}

Смотрите в действии на Stabblitz