@steppy /角
Steppy的应用内导览的Angular适配器：引导弹出窗口
实时应用程序，从您的端到端测试运行的相同Markdown场景编译。
覆盖层本身是 <steppy-tour-host> 从 @steppy/player/tour;这
package以Angular的方式安装它。
provideSteppyTours({...})：配置，在app.config.ts.<steppy-tours />：叠加，放置 一次 在应用程序外壳中。SteppyTours：一个根服务tostart()/stop()/next()旅游, 与active，current和lastError信号和信号events流。steppyTourStart：点击时开始游览的指令。
Angular 20-22, zone.js或无区，ssr安全(没有任何渲染或加载
服务器)。你的应用不需要 CUSTOM_ELEMENTS_SCHEMA.
安装
npm install @steppy/angular @steppy/player
@steppy/player 是与适配器版本相同的对等依赖项。
要使用未发布的构建版本，请从Steppy签出中构建两个版本：
npm --prefix packages/player ci
npm --prefix packages/player run build
npm --prefix packages/angular ci
npm --prefix packages/angular run build
然后，在您的应用程序中，要么依赖于文件夹
（"@steppy/player": "file:<checkout>/packages/player"，
"@steppy/angular": "file:<checkout>/packages/angular/dist",
"preserveSymlinks": true 这样Angular就不会被加载两次)，
或者安装tarball npm pack 从这两个文件夹中取出。
使用
// app.config.ts
import { inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslateService } from '@ngx-translate/core';
import { map } from 'rxjs';
import { provideSteppyTours } from '@steppy/angular';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideSteppyTours({
// Written by `steppy tours` (an app-assets target in public/tours).
fallbackManifest: 'tours/tours.manifest.json',
// Optional: follow your i18n library. Without it the tours follow <html lang>.
locale: () => {
const translate = inject(TranslateService);
return toSignal(translate.onLangChange.pipe(map((e) => e.lang)), { initialValue: translate.getCurrentLang() ?? '' });
},
}),
],
};
// app.component.ts
@Component({
selector: 'app-root',
imports: [RouterOutlet, SteppyToursComponent, SteppyTourStart],
template: `
<button steppyTourStart="create-invoice">Show me how</button>
<router-outlet />
<steppy-tours (tourComplete)="onDone($event)" />
`,
})
export class AppComponent {}
// anywhere
const tours = inject(SteppyTours);
await tours.start('send-invoice', { params: { invoiceId: 1001 } });
适配器为您做了什么
- 懒惰，只加载浏览器。 后导入叠加模块 第一次渲染，并且只在浏览器中。
- 路由器导航。 从入口路线开始的游览
与导航
Router.navigateByUrl，在Angular区域内，所以路由 视图在zone.js应用中渲染。拒绝或重定向的守卫 导航立即使游览失败。tour-error,故entry-params） 而不是让它等待一个永远不会渲染的元素。集navigate: 'document'对于整个页面加载，或传递您自己的函数。 - 区。 叠加的观察者、轮询和帧运行在Angular之外 区域，所以他们从不驱动变化检测；事件、输出和路由器 回到里面来。
start()从任何地方。 它等待<steppy-tours>去上马 叠加加载(readyTimeout（默认为10秒），最后一个调用获胜，并且它 解决了false-从不拒绝-当旅行无法开始时。
破坏 <steppy-tours> 暂停巡回演出而不是解散
它（覆盖层保留其恢复记录）。呼叫 tours.stop() 首先结束它。
输入在 <steppy-tours> 覆盖 provideSteppyTours() 设置:
fallbackManifest， manifest， buildId， guideOrigin， locale，
targetTimeout， baseZIndex， disabled， strings， source。输出:
tourStart， tourStep， tourComplete， tourDismiss， tourOffpath，
tourError.
哈希路由(withHashLocation())不支持应用内导览。
完整的参考-创作之旅，覆盖的选项和事件，
远程模式、CSP和可信类型- is docs/tours.md 在草原上
存储库。
开发
npm ci
npm test # the zoneless suite, then the zone.js suite (ng test --configuration zone)
npm run build # ng-packagr → dist/; publish dist/, never this folder
覆盖层被specs中的假元素所取代(src/testing/),除了
在 real-overlay.spec.ts。该浏览器针对一个真实的Angular + PrimeNG进行了测试
应用程序是 tests/integration/test_tour_angular_it.py (演示是
fixtures/tour-demo-angular/）。