如何让 ZURB Foundation 6.4.1 与 Angular 4 一起使用？

Question

我试图让 ZURB Foundation 6.4.1 与 Angular 4 一起工作，但我失败得很惨。

我正在学习本教程 http://shermandigital.com/blog/zurb-foundation-with-angular-cli/，但它仅适用于 Foundation 6.3。

感谢您的帮助。

Answer 1

试试这个：添加

@import "../node_modules/foundation-sites/assets/foundation";

到style.scss

这应该可以解决您的问题

如果没有其他解决方案：

安装基础：

npm install foundation-sites --save
完成后转到.angular-cli.json（它是项目根目录中的隐藏文件）

添加此代码：

"styles": [
"../node_modules/foundation-sites/dist/foundation-flex.css",
"styles.scss"
],
"scripts": [
"../node_modules/foundation-sites/vendor/jquery/dist/jquery.min.js",
"../node_modules/foundation-sites/dist/foundation.min.js"
],

它应该有效，但不是对所有情况都有效，例如模态。将此添加到您的 app.ts 或有问题的组件中：代码：

{ import Component } from '@angular/core';
declare var $:any

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
  // other stuff here
});

export class MyComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    $(document).foundation();
  }
}

Answer 2

@Raphael ABADIE-MOREAU 的回答有效，但在我发布此评论时最新版本的基础站点是 6.5.0，其中一些已损坏，这就是我使用的：

"styles": [
   "../node_modules/foundation-sites/dist/css/foundation.css",
   "styles.css"
 ],
 "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/js/foundation.min.js"
 ],

您还会注意到 jquery 不是从基础站点导入的，您需要单独安装它，并确保 jquery 在 foundation.min.js 之前。

要将脚本安装到 node_modules，您可以将其输入 cmd/terminal:

npm i foundation-sites jquery --save

安装基础站点和jquery。

如何让 ZURB Foundation 6.4.1 与 Angular 4 一起使用？

How do I get ZURB Foundation 6.4.1 to work with Angular 4?

zurb-foundation

zurb-foundation-6

angular