Ionic4 和 Intro.js 显示问题
Ionic4 and Intro.js display problems
将 Intro.js 安装到 Ionic4 应用程序后,工具提示无法正确显示。
运行 introJs().start();启动工具提示但显示错误。
工具提示应显示在正确的元素上,并且该元素必须显示在叠加层上。
这里的技巧是让 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();
}
}
此外,一些离子组件 'content' css 属性 必须被覆盖。
ion-nav,
ion-tab,
ion-tabs,
ion-list {
contain: none;
}
我已经在 github 上传了一个示例项目:https://github.com/konum/ionic4-introjs/
如果(且仅当)您足够勇敢,我为 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(...)
将 Intro.js 安装到 Ionic4 应用程序后,工具提示无法正确显示。
运行 introJs().start();启动工具提示但显示错误。
工具提示应显示在正确的元素上,并且该元素必须显示在叠加层上。
这里的技巧是让 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();
}
}
此外,一些离子组件 'content' css 属性 必须被覆盖。
ion-nav,
ion-tab,
ion-tabs,
ion-list {
contain: none;
}
我已经在 github 上传了一个示例项目:https://github.com/konum/ionic4-introjs/
如果(且仅当)您足够勇敢,我为 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(...)