Как программно открыть NgbPopOver из кода, не нажимая кнопку - PullRequest
Новая
       14

Как программно открыть NgbPopOver из кода, не нажимая кнопку

0 голосов
/ 30 мая 2019

Требуется показать информационное сообщение о том, почему кнопка сохранения отключена. Чтобы кнопка «Сохранить» была включена, необходимо выбрать несколько обязательных фильтров. Таким образом, чтобы пользователь знал об этом, я пытаюсь отобразить всплывающее окно на отключенной кнопке, которая показывает необходимую информацию. Я хотел бы отобразить всплывающее окно для отображения в верхней части кнопки, как только она отключена. На данный момент мой настоящий код пытается выполнить большинство требований, за исключением того, что мне нужно физически навести курсор или нажать на кнопку, чтобы отобразить всплывающее окно. Я хочу показать всплывающее окно, как только кнопка отключена из-за некоторой логики в коде позади. 

<button id="btnCancel" title="Cancel" aria-label="Cancel Filter dialog" class="btn btn-cancel"
            style="margin-right: 5px;" (click)="close();" (keydown)="trapFocus('cancel',$event)">CANCEL</button>
          <button id="btnApply" title="Apply" class="btn btn-primary"
          [disabled]="!(checkIfAnyFiltersAreSelected() && checkIfMandatoryFiltersAreSelected())"
          (click)="onApply()" (keydown)="trapFocus('apply',$event)">
            <span triggers="hover" *ngIf="!checkIfMandatoryFiltersAreSelected(); else elseTemplate" [ngbPopover]="popContent"
              popoverTitle="Mandatory Filters">
              APPLY
            </span>
            <ng-template #elseTemplate>
              APPLY
            </ng-template>
          </button>
          <ng-template #popContent>Necessary Information to be shown here</ng-template>

Пытался следовать решению в этом вопросе, но ответ не ясен и не решает проблему

ngbPopover не закрывается и открывается при загрузке

1 Ответ

1 голос
/ 31 мая 2019

Вы можете сделать это, определив ручной триггер для всплывающего окна и передав поповер в функцию, которая определяет, отключена ли кнопка, чтобы, если кнопка отключена, всплывающее окно можно было открыть программно.

HTML-шаблон

Если вы определите кнопку следующим образом: 

<button type="button" class="btn btn-outline-secondary mr-2" 
    placement="top" ngbPopover="Displayed when button is disabled"
    triggers="manual" #p="ngbPopover" [disabled]="isDisabled(p)">
      Apply
</button>
  • triggers="manual" означает, что она не будет срабатывать автоматически при наведении курсора на кнопку
  • #p="ngbPopover" - это ссылка на объект NgbPopover
  • [disabled]="isDisabled(p)" - это функция, которая возвращает логическое значение, указывающее, должна ли кнопка быть отключена или нет.Передача p (NgbPopover) позволяет программно открывать его в функции isDisabled.

TypeScript

Функция isDisabled выглядитнапример: 

isDisabled(popover) {
  if (this.disabled) {
    popover.open();
  }
  return this.disabled;
}

Это проверяет значение свойства disabled (это просто логическое значение, которое я определил в файле TypeScript) и откроет всплывающее окно, если оно истинно.Затем он возвращает значение, чтобы шаблон HTML мог включить / отключить кнопку соответствующим образом.

Пожалуйста, посмотрите this StackBlitz для демонстрации.Если вы установите флажок (связанный со свойством disabled TypeScript, вы увидите, что всплывающее окно отображается, когда кнопка отключена.

...