У меня есть компонент под названием «popover», который создает черный прозрачный фон для отображаемого содержимого. Он присоединяется к DOM с абсолютной позицией к родительскому элементу. Кроме того, он делает ряд вещей
- закрывается при нажатии снаружи
- изменяет размеры на событиях dom
- и еще несколько вещей.. не существенных для моего вопроса.
Таким образом, он по существу создает этот стиль для контента и отображает любой контент, который вы передаете в него, используя ng-content
;
Пример использования
<popover [(show)]="true" [width]="200">YOUR CONTENT</popover>
Шоу по умолчанию имеет значение false. Затем родительский компонент может динамически установить для него значение true, когда ему нужно показать всплывающее окно.
Теперь я сталкиваюсь с ситуацией, когда я хочу использовать этот компонент в *ngFor
, который создает структуру, подобную таблице, с несколькими столбцами, и каждая строка может иметь 3/4 элемента, используя это всплывающее окно, и количество строк может продолжать расти> 50 , Это означает, что вокруг скрыто 100 или более всплывающих окон.
Я думал, что если бы я мог создать общий экземпляр этого всплывающего окна для использования, потому что он по существу отображает переданный ему контент (мне не нужно беспокоиться о его позиционировании - он настроен на динамическое чтение позиции родителей и, соответственно, прикрепить к DOM). Таким образом, идея заключается в том, что создается только 1 экземпляр, и этот экземпляр будет просто отображать содержимое всякий раз, когда вы наводите курсор на элемент, который в нем нуждается. Возможно ли это сделать Angular4?
Идея состоит в том, чтобы предотвратить создание
Angular version I am using: 4.2.6 (latest)
Спасибо за ваше время и усилия.