带有角度 6 集成的 Foundation 6 不起作用答案

【问题标题】：Foundation 6 with angular 6 integration not working带有角度 6 集成的 Foundation 6 不起作用
【发布时间】：2018-06-19 23:03:46
【问题描述】：

我正在尝试使用一些基础组件，例如模型和手风琴菜单，但不幸的是这不起作用。

    import { Component, OnInit} from '@angular/core';
import { MenuItems } from '../../shared/menu-items';
import { Foundation } from 'node_modules/foundation-sites/js/foundation.core';
declare var $:any;


@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {

  isShrinkMedium: Boolean = true
  menuItems;
  constructor() { }

  ngOnInit() {
    Foundation.addToJquery($);
    $(document).foundation();
    this.menuItems =  new MenuItems().getAll();
   }

这是我的组件。我在控制台中收到以下错误。

当我点击我在图片中圈出的地方时，我会在下面看到这个。

因此，没有任何基础组件可以正常工作，但是当我使用较低版本的第 4 版时一切正常。希望有人知道这里发生了什么

【问题讨论】：

npm i --save @types/jquery
Vikas 我已经这样做了。

标签： jquery angular typescript zurb-foundation zurb-foundation-6

【解决方案1】：

试试这个

cd path_project

npm install jquery
npm install foundation-sites

npm install @types/jquery --save-dev
npm install @types/foundation-sites --save-dev

如果不工作！

复制这个

 interface JQuery {
     foundation(method?: string | Array<any>, ...args: any[]): JQuery;
  }

来自

/path_project/node_modules/foundation-sites/dist/js/foundation.d.ts

粘贴进去

/path_project/node_modules/@types/jquery/index.d.ts

设置在最后一行

在

/path_project/src/polyfills.ts

设置 ===>

    /***************************************************************************************************
 * JQuery
 */
import 'jquery';

现在您可以在代码中设置

import { Component, OnInit } from '@angular/core';
// import 'jquery'; // set this in polyfills.ts
//// import * as $ from 'jquery';
// import { Foundation } from 'foundation-sites/dist/js/foundation.min';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ex4';
  ngOnInit() {
      // Foundation.addToJquery($);
    $(document).foundation();
  }
}

别忘了

将“css”和“js”添加到

/path_project/angular.json

喜欢这个

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

重启

ctr+c


ng serve

【讨论】：