API リファレンス

portal の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

15 個のインプットで portal を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`animation`	`boolean`	—	true の場合、ポータルの開閉がアニメーションされます。デフォルト: true
`ariaLabelledBy`	`string`	—	ポータルウィンドウに設定する `aria-labelledby` 属性の値
`ariaDescribedBy`	`string`	—	ポータルウィンドウに設定する `aria-describedby` 属性の値
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	ポータルが dismiss される直前に呼び出されるコールバック。dismiss を防ぐには false を返します。
`container`	`string \| HTMLElement`	—	すべての新しいポータルウィンドウを付加する要素を指定するセレクタ。指定しない場合は `body` になります。
`injector`	`Injector`	—	依存性注入を有効にするために、ポータルコンテンツで使用する `Injector`。
`keyboard`	`boolean`	—	true の場合、Escape キーが押されるとポータルが閉じます。デフォルト: true
`scrollable`	`boolean`	—	スクロール可能なポータルコンテンツ（デフォルトは false）。
`windowClass`	`string`	—	カスタムのスタイルや配置のためにポータルウィンドウに付加するカスタムクラス。
`portalDialogClass`	`string`	—	ポータルダイアログコンテナに付加するカスタムクラス。
`portalContentClass`	`string`	—	ポータルコンテンツのラッパーに付加するカスタムクラス。
`headerSelector`	`string`	—	ポータルウィンドウのヘッダー要素のカスタムセレクタ。特定のポータルセクションを対象にするのに役立ちます。
`footerSelector`	`string`	—	ポータルウィンドウのフッター要素のカスタムセレクタ。特定のポータルセクションを対象にするのに役立ちます。
`dismissSelector`	`string`	—	ポータルウィンドウの dismiss をトリガーできる要素のカスタムセレクタ。デフォルト: `[data-dismiss="portal"]`
`closeSelector`	`string`	—	ポータルウィンドウの close をトリガーできる要素のカスタムセレクタ。デフォルト: `[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>`	指定されたコンテンツ（コンポーネント型、TemplateRef、または文字列）とオプションで新しいポータルウィンドウを開き、それを制御するための HubPortalRef を返します。コンテンツコンポーネントは HubActivePortal を注入して、内側からポータルを閉じたり dismiss したりできます。
`HubPortal.toggle`	`toggle<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	現在開いているすべてのポータルを理由 'toggle' で dismiss し、それらが完全に非表示になるのを待ってから、指定されたコンテンツとオプションで新しいポータルを表示します。新しいポータルへの参照を返します。
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	現在表示されているすべてのポータルウィンドウを、指定された理由で dismiss します。
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	アプリケーション内に現在開いているポータルウィンドウがあるかどうかを示します。
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	ポータルが開かれるか削除されるたびに、現在開いている HubPortalRef インスタンスのリストを発行するイベントエミッター。

テンプレート

自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`Portal Template`	動的レンダリングのために HubPortal サービスに渡せるテンプレート参照	`<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>`