Поделиться экземпляром компонента — Angular 4

У меня есть компонент под названием «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)

Спасибо за ваше время и усилия.


person jerry    schedule 12.07.2017    source источник


Ответы (1)


Если я правильно понимаю ваш вопрос, то, что вы хотите сделать, может быть достигнуто с использованием внедрения зависимостей. Вы можете посмотреть диалоговое окно Angular Material (https://material.angular.io/components/dialog/overview) в качестве шрифта для вдохновения.

person Picci    schedule 12.07.2017
comment
не могли бы вы быть более подробным, пожалуйста? В смысле привести пример? Спасибо - person jerry; 12.07.2017