Ionic4 和 Intro.js 显示问题答案

【问题标题】：Ionic4 and Intro.js display problemsIonic4 和 Intro.js 显示问题
【发布时间】：2019-07-05 14:49:24
【问题描述】：

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

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

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

【问题讨论】：

标签： angular ionic-framework ionic4 intro.js

【解决方案1】：

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

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/

【讨论】：

【解决方案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 中定义 Intro 的数据

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(...)

【讨论】：