使用Aurelia的引导程序

我还没有找到一个很好的例子来说明如何使用Aurelia。我用Thread（

Thread 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';

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();
}

现在我想在我的一个视图模型中使用它。以下是我尝试过的：

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

---

我做错了什么？

克里斯蒂安·奥马扎巴尔、阿夫拉汉姆库和拉巴·G的评论帮助我解决了这个问题。最简单的解决方案是：

import Tour from 'bootstrap-tour';

然后，直接使用它，如下所示：

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';

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可能是一个废弃的回购。它目前与bootstrap 3.4.1（最新的v3版本）不兼容，因此对我来说毫无用处。如果有人仍然想使用它，这里有一些解决方法和一个备用的分叉回购：

---

您好，请指定：typescript或ecma6？您使用的是webpack吗？我看了一下，问题似乎是导出教程的方式。请重试：从“引导教程”导入教程，不带括号。我认为问题是您试图插入它，而不是直接使用它。请向DI注册该类（并使用this.tour而不是new this.tour）或在构造函数中使用new tour（并使用this.tour而不是new this.tour）