菜单
Guided tours with NgxTourService, tourItem directive, startNgxTour and useMockDataDuringTour from @ibenvandeveire/ngx-inform. Requires CDK overlay CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Template directives ngxIsAuthenticated, ngxHasFeature, ngxHasPermission and impure pipes from @ibenvandeveire/ngx-authentication.
Route guards from @ibenvandeveire/ngx-authentication: NgxIsAuthenticatedGuard, NgxHasFeatureGuard, NgxHasPermissionGuard. Use with NgxAuthenticatedRoute data.
NgxAuthenticatedHttpClient and provideNgxAuthenticationConfiguration httpClientConfiguration. Use for base URL, withCredentials, authenticated interceptors, and download helper.
NgxAuthenticationAbstractService state: user$, session$, metadata$, hasFeature, hasPermission, global features. Use after provideNgxAuthenticationConfiguration.
Bootstrap @ibenvandeveire/ngx-authentication with provideNgxAuthenticationConfiguration and NgxAuthenticationAbstractService. Use when wiring sign-in/out and auth types.
Angular wrapper for CookieConsent V3 and cookie helpers from @ibenvandeveire/ngx-cookies. Use for setupCookiesHandler, consent observables, set/get/remove cookie, or *hasCookie directive.
| name | ngx-inform-tour |
| description | Guided tours with NgxTourService, tourItem directive, startNgxTour and useMockDataDuringTour from @ibenvandeveire/ngx-inform. Requires CDK overlay CSS. |
Root SCSS: @import '@angular/cdk/overlay-prebuilt.css';
provideNgxTourConfiguration(CustomTourStepComponent);
// or { component, offset: { top, bottom } }
Step component extends NgxTourStepComponent — must include #stepTitle for aria-labelledby. Output handleInteraction: 'next' | 'back' | 'close'.
this.tourService.startTour([
{
title: '…',
content: '…',
tourItem: 'helloWorld', // matches tourItem="helloWorld" on element
position: 'below',
cutoutMargin: 10,
delay: 2000, // wait for DOM; default 100ms skip
beforeVisible / onVisible / afterVisible,
component, disableBackdrop, data, stepClass, offset,
},
], onClose?, startIndex?).subscribe();
Directive: tourItem="id" → adds ngx-tour-item-active when highlighted.
*ngxTourShowWhen — conditional template while tour active.
Observables: tourStarted$, tourEnded$, currentStep$, currentIndex$, previousStep$, currentTour$.
startNgxTour(steps, onClose?, startIndex?, tourService?) — after source emits, forward value when tour endsuseMockDataDuringTour(mock) — swap stream during tour (injection context only)onClose navigate home; may need ChangeDetectorRef.detectChanges() after router.navigate.scrollIntoView; custom scroll if element not found.NgxTourServiceMock.