Question

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

运行introJs（）。start（）;启动工具提示，但显示错误。

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

Answer 1

这里的技巧是使introjs添加到您的组件根目录中。默认情况下，intro.js将div添加到body元素中，因此工具提示无法正常显示。要在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/

Answer 2

如果（并且仅当您）足够勇敢时，我为intro.js制作了一个包装程序包，以用作Angular应用程序上的指令。

这是我为我和我的公司制作的私有（@）软件包，因此虽然没有完整的文档记录，但确实可以保存

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

小指南：

1）使用

安装软件包

localhost

（您应该检查所需的版本。从Angular版本8开始，我遵循Angular的版本，从8版本开始，只需尝试最后可用的版本即可）

2）在您的模块中：

npm install @esfaenza/ngx-introjs

3）在组件的.ts中定义Intro的数据

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

4）在您的HTML中，将指令附加到您需要的位置

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

5）要使演示开始，请像这样在组件中注入IntroJsService：

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

6）并像这样使用它：

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

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

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

Ionic4和Intro.js显示问题

2 个答案: