Присвойте ширину для ngbTypeahead динамически в зависимости от нажатого элемента - PullRequest
Новая
       1

Присвойте ширину для ngbTypeahead динамически в зависимости от нажатого элемента

0 голосов
/ 12 февраля 2020

Для нашего проекта мы используем несколько компонентов и виджетов из ng- bootstrap (Angular Powered Bootstrap). Для предварительных поисковых запросов мы используем компонент ngbTypeahead пакета, который должен отображаться для полей ввода разных размеров в одном и том же компоненте, содержащем / упаковывающем. При попытке динамически назначить ширину на основе offsetWidth элемента ввода, по которому щелкнули, я обнаружил следующее:

  1. Я не могу связать или назначить значение offsetWidth, полученное из нажатых вход в объект ngbTypeahead в любом случае, API, кажется, не предоставляет переменную, с которой я могу динамически привязывать ширину.
  2. Я не могу получить доступ или манипулировать ngbTypeahead elementRef напрямую, поскольку его модификатор доступа - private. Я все еще мог бы манипулировать им, если бы позволил его скомпилировать, но это противно, верно?
  3. Я не могу получить доступ к классу popupService, который, как мне кажется, помогает ngbTypeahead появиться, думал, что класс может содержать наблюдаемое. (Относится к 4)
  4. Невозможно подписаться на значения в ngbTypeahead, которые помогают определить, отображается ли заголовок или нет, попытался использовать isPopupOpen() с BehaviourSubject (немного отчаянно), но подписка не срабатывает при изменении стоимости. Если бы это было возможно, то стилизация элемента с использованием Renderer2 была бы возможной.
  5. Нет способа сделать компонент typeahead «постоянным» в DOM, так что компоненту могут быть назначены классы или значения ширины, прежде чем он будет показан .

Надеюсь, вышеприведенного достаточно, чтобы доказать, что я пытался сделать компонент таким же широким, как и его соответствующий элемент ввода. Я уверен, что я мог что-то упустить, потому что я не вижу, чтобы слишком многие жаловались на это на net. Может быть, есть IS Observable, на который я могу подписаться, который срабатывает при открытии окна с заголовком типа, о котором я пока не знаю. Вот как ngbTypeahead связан с элементом ввода:

Шаблон: 

<input name="searchTermsInput" (click)="onTypeaheadClick($event)" #searchTermsInput="ngModel" #searchTermsAhead="ngbTypeahead" class="form-control has-delete"
   type="text" (selectItem)="onSuggestionSelected($event.item)" placeholder="{{ 'Search.Placeholder.'+types[searchType] | translate }}"
   [(ngModel)]="keywords" (keyup.enter)="onApplyKeywords()" [ngbTypeahead]="autocomplete" [focusFirst]="false" container="body" />

Чтобы повторить вопрос о проблеме, которую я пытался «связно», описанное выше: Как динамически назначить ширину элементу ngbTypeahead или ngb-typeahead-window DOM, основываясь на соответствующем элементе ввода с фокусировкой / щелчком?

...