Angular 2+ 中的自定义游览提示 - angular-custom-tour

Angular 2+ 中的自定义游览提示 - angular-custom-tour
插件名称 angular-custom-tour
发布时间 2020年9月22日
插件作者 miraxes

在Angular 2+应用程序中创建自定义功能提示。

安装:

npm install angular-custom-tour –save

用法

  • 安装 npm install angular-custom-tour --save

在您的模块(app.module.ts)中

import { HintModule } from 'angular-custom-tour'

@NgModule({
  ...
  imports: [
    ...
    HintModule // Put here
    ...
  ]
  ...
]

在页面组件中初始化

如果要在页面加载后初始化滑块,则应使用ngAfterViewInit

import { HintService } from 'angular-custom-tour'

@Component({
  ...
  providers: [... HintService ... ],
  ...
})

class AppComponent {

  constructor(public hintService: HintService){ }

  startTour() {
    this.hintService.initialize();
  }

}
<!-- Bluring element insert on top of the page-->
<tour-overlay></tour-overlay>

<!-- start TOUR -->
<button name="button" (click)="startTour()"> START!</button>

<!-- Each step could be placed at ANYWHERE -->
<div class="i-want-highlight-this" id="highlight-me"> WOW!</div>

<tour-step selector="highlight-me" order="3" position="right" title="title string">
  <!-- ANY HTML HERE
    NOTE: ONLY selector attribute is required! others is up to you
  -->
</tour-step>