aurelia - 在 Aurelia 中使用 bootstrap-tour
问题描述
我还没有找到一个很好的例子来说明如何将Bootstrap Tour与 Aurelia 一起使用。我用 yarn ( ) 安装了它,并添加了如下yarn add bootstrap-tour
依赖项:main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-tour/build/css/bootstrap-tour.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-tour/build/js/bootstrap-tour.min.js';
现在我想在我的一个视图模型中使用它。这是我尝试过的:
import { Tour } from 'bootstrap-tour';
在我的班级定义中:
@inject(Store, EventAggregator, I18N, Router, Tour)
export default class {
constructor(store, events, i18n, router, tour) {
this.store = store;
this.events = events;
this.i18n = i18n;
this.router = router;
this.tour = tour;
}
// ... other methods and code
startTour() {
const tourNewReports = new this.tour({
steps: [
{
element: '#tour-btn-menu',
title: 'New reports!',
content: 'Check out new reports!',
},
{
element: '.tour-label-product',
title: 'Product report',
content: 'Click on a specific product to see more reports.',
},
],
});
tourNewReports.init();
tourNewReports.start();
}
}
但是,这甚至没有编译,我收到以下错误:
Error: Error invoking _class3. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
我也尝试过跳过注入并仅使用const tourNewReports = new Tour({
,但出现此错误:
bootstrap_tour__WEBPACK_IMPORTED_MODULE_6__.Tour is not a constructor
at _class3.startTour
我究竟做错了什么?
解决方案
Cristián Ormazábal、avrahamcool 和 Rabah G 的评论帮助我解决了这个问题。最简单的解决方案是:
import Tour from 'bootstrap-tour';
然后,直接使用如下:
startTour() {
const tourNewReports = new Tour({
steps: [
{
element: '#tour-btn-menu',
title: 'New reports!',
content: 'Check out new reports!',
},
{
element: '.tour-label-product',
title: 'Product report',
content: 'Click on a specific product to see more reports.',
},
],
});
tourNewReports.init();
tourNewReports.start();
}
然而,最终,bootstrap-tour 似乎是一个废弃的 repo。它目前与 Bootstrap 3.4.1(最新的 v3 版本)不兼容,因此对我来说毫无用处。如果有人仍然想使用它,这里有几个解决方法和一个备用的分叉回购:
推荐阅读
- visual-studio - 如何在 Visual Studio 2019 中禁用单词自动突出显示?
- html - 悬停时动画伪元素
- php - PHP理论中的对象
- javascript - 为什么排序在 React 组件中不起作用
- java - 当我的程序在 BlueJ 中的文本“Gross Pay :”之后遇到“%.2f”时,它“崩溃”了
- xml - XSLT 复制除一个节点外的所有 XML 节点,有条件地修改它
- selenium - 在 docker 中执行机器人测试时见 firefox
- laravel - Laravel 6 表单数组 $request->input() 不起作用
- html - 顶部标题:减少输入宽度
- c++ - 使用位运算符的唯一数字