3

所以我即将开始一个项目，我认为 Angular 2.0 似乎是一个非常可靠的框架：路由、组件、指令等。但是，我已经使用 bootstrap v3 和 jQuery 构建了许多我想使用的东西。我想知道是否可以使用 Angular-cli 制作的结构集成 bootstrap v3 和 JQuery？

顺便说一句，我见过其他使用 Gulp 的 Angular 2 种子，但他们总是推荐使用官方的 Angular-cli。

此外，我对将现有的 JS 库引入 Typescript 的实际工作方式以及 jquery 的 $ global 是否会干扰 typescript 也是个新手。

注意：我知道 ng2-bootstrap，但我不认为一切都与这种方法兼容，因为它不使用 jquery 作为依赖项。我也知道在 Angular 中使用 jquery 并不是最佳实践，但我认为在某些情况下你确实需要它来处理插件或依赖项。

4

1 回答 1

6

我可以向您建议一种解决方法，直到他们获得对 3rd 方库的更好支持。它对我有用:)

输入后

npm install jquery

和

 typings install jquery --ambient --save

在您的 angular-cli-build.json 中，确保它保持这种方式

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'jquery/**/*.js'
    ]
  });
};

在你的 system-config.ts 中：

/** Map relative paths to URLs. */
 const map: any = {
   'jquery': 'vendor/jquery'
 };

在你的 src/index.html 添加这一行

<script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

现在在你想要使用 jquery 的组件中，这样写

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

在我的项目中，我正在这样做。希望它可以帮助你:)。

于 2016-06-10T08:25:41.603 回答