Ionic4和Intro.js显示问题

Question

在Ionic4应用程序中安装Intro.js后，工具提示无法开箱即用地正确显示。

运行introJs().start()；将启动工具提示，但显示错误。

工具提示应显示在正确的元素上，并且该元素必须显示在覆盖上。

Answer 1

这里的诀窍是让introjs添加到组件根目录中。默认情况下，intro.js会向body元素添加div，所以工具提示不会显示ok。要在home.page.ts上启动intro.js，必须指定with document.querySelector(您的组件选择器)

​

import { Component } from '@angular/core';

import * as introJs from 'intro.js/intro.js';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  showHelp(){
    introJs(document.querySelector("app-home")).setOptions({
      'nextLabel': 'Next step',
      'prevLabel': 'Previous step',
      'skipLabel': 'Don\'t bother me!',
      'doneLabel': 'Finish'
    }).start(); 
  }
}

​

另外，一些离子组件的内容css属性必须被覆盖。

​

ion-nav,
ion-tab,
ion-tabs,
ion-list {
    contain: none;
}

​

我已经在github上传了一个示例项目：https://github.com/konum/ionic4-introjs/

Answer 2

如果你足够勇敢，我为intro.js做了一个包装包，作为一个Angular应用程序的指令。

这是我为我自己和我的公司制作的一个私人(@)包，所以它根本没有很好的文档记录，但肯定是有管理的

https://www.npmjs.com/package/@esfaenza/ngx-introjs

小指南：

1)安装包：

npm install @esfaenza/ngx-introjs

(您应该检查您需要的版本。从Angular版本8开始，我遵循了Angular的版本，从8开始尝试最后一个可用的版本)

2)在您的模块中：

import { IntroJsModule } from "@esfaenza/ngx-introjs"
...
@NgModule({
imports: [IntroJsModule, etc...],
declarations: [your stuff],
exports: [your stuff]
})

3)在组件的.ts中定义介绍的数据

public const IntroItems = {
'Group': '1',
'1': 'Step 1 description',
'2': 'Step 2 description'
};

4)在HTML中，将指令附加到需要的地方

[intro]="IntroItems" [Order]="1"

5)要启动演示文稿，可以像这样在组件中注入IntroJsService：

import { IntroJsService } from "@esfaenza/ngx-introjs";
constructor(public introService: IntroJsService, etc...) { }

6)，使用方法如下：

this.introService.start(null, '1');

7)如果您想要更改intro.js的默认选项，可以使用

this.introService.setOptions(...)