Справочник API

Вот полный контракт portal: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте portal с помощью 15 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`animation`	`boolean`	—	Если true, открытие и закрытие portal будут анимированы. По умолчанию: true
`ariaLabelledBy`	`string`	—	Значение атрибута `aria-labelledby`, устанавливаемое для окна portal
`ariaDescribedBy`	`string`	—	Значение атрибута `aria-describedby`, устанавливаемое для окна portal
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Callback непосредственно перед закрытием (dismiss) portal. Верните false, чтобы предотвратить закрытие.
`container`	`string \| HTMLElement`	—	Селектор, указывающий элемент, к которому должны добавляться все новые окна portal. Если не указан, будет `body`.
`injector`	`Injector`	—	`Injector`, используемый для содержимого portal для включения внедрения зависимостей.
`keyboard`	`boolean`	—	Если true, portal будет закрыт при нажатии клавиши Escape. По умолчанию: true
`scrollable`	`boolean`	—	Прокручиваемое содержимое portal (false по умолчанию).
`windowClass`	`string`	—	Пользовательский класс, добавляемый к окну portal для пользовательского стиля и позиционирования.
`portalDialogClass`	`string`	—	Пользовательский класс, добавляемый к контейнеру диалога portal.
`portalContentClass`	`string`	—	Пользовательский класс, добавляемый к обёртке содержимого portal.
`headerSelector`	`string`	—	Пользовательский селектор для элемента заголовка окна portal. Полезен для нацеливания на определённые секции portal.
`footerSelector`	`string`	—	Пользовательский селектор для элемента подвала окна portal. Полезен для нацеливания на определённые секции portal.
`dismissSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (dismiss) окна portal. По умолчанию: `[data-dismiss="portal"]`
`closeSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (close) окна portal. По умолчанию: `[data-close="portal"]`

События

События пока не задокументированы.

Методы

Управляйте portal из кода — 5 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`HubPortal.open`	`open<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Открывает новое окно portal с указанным содержимым (тип компонента, TemplateRef или строка) и опциями и возвращает HubPortalRef для управления им. Компоненты содержимого могут внедрить HubActivePortal, чтобы закрыть или отклонить portal изнутри.
`HubPortal.toggle`	`toggle<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Отклоняет все открытые в данный момент portal с причиной 'toggle', дожидается их полного скрытия и затем показывает новый portal с указанным содержимым и опциями. Возвращает ссылку на новый portal.
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	Отклоняет все отображаемые в данный момент окна portal с указанной причиной.
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	Показывает, есть ли в приложении открытые окна portal в данный момент.
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	Эмиттер событий, испускающий список открытых в данный момент экземпляров HubPortalRef при каждом открытии или удалении portal.

Шаблоны

Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`Portal Template`	Ссылка на шаблон, которую можно передать в HubPortal service для динамической отрисовки	`<ng-template #portalTemplate> <div class="portal-content"> <div class="portal-header"> <h4>Portal Title</h4> <button data-dismiss="portal">×</button> </div> <div class="portal-body"> Portal content goes here </div> <div class="portal-footer"> <button data-dismiss="portal">Cancel</button> <button data-close="portal">OK</button> </div> </div> </ng-template> <!-- Open the portal --> <button (click)="portal.open(portalTemplate)">Open Portal</button>`