基础6与角6整合不起作用

Question

我试图使用基础的一些组件，如模型和手风琴菜单，但遗憾的是这不起作用。

    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时一切正常。希望有人知道这里发生了什么

Answer 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/第三天/就是/foundation.的.同时

并粘贴它

/path_project/node_modules/@types/jQuery/index.的.同时

将它设置在最后一行

---

在

/path_project/双人床/poly fill时.同时

设置===>

    /***************************************************************************************************
 * 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