语义 UI jquery 函数在 Angular2 应用程序上不起作用

Question

甚至认为 jquery 不限于 angular2 应用程序，在某些情况下您可以真正使用它，例如需要包含一些功能依赖于 [=47= 的经典前端框架].在我的问题中，我为我的 angular2 应用程序包含了语义 UI。我没有关注 Angular 集成，因为它处于开发阶段，出于某种原因你可以运行 jquery 在 angular2 应用程序中，所以我想你可以使用传统安装和整合。

然而，在实现粘性 ui 时，我遇到了语义 ui 的一些功能错误。例如

$('.ui.sticky').sticky();

Typescript 不允许 sticky() 函数产生此错误：

Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.

我通过这一步安装了jquery

$ npm install jquery --save
$ npm install @types/jquery --save-dev

我在 angular-cli 样式和脚本部分包含了语义 ui 和 jquery 依赖项，如下所示：

    "styles": [
        "styles.css",
        "assets/default/momentum.css",
        "assets/semantic-ui/dist/semantic.min.css",
        "assets/semantic-ui/dist/components/icon.css",
        "assets/semantic-ui/dist/components/card.min.css",
        "assets/semantic-ui/dist/components/grid.min.css",
        "assets/semantic-ui/dist/components/sticky.min.css"
    ],
    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "assets/semantic-ui/dist/semantic.min.js",
        "assets/semantic-ui/dist/components/sticky.min.js"
    ],

并在angular应用组件中调用

import * as $ from 'jquery'

一点用都没有。这是我在每次尝试中所做的。不同方法中的组件并尝试错误：

import { Component, AfterViewInit } from '@angular/core';

import * as $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
     // The .sticky() has an error wrap: 
     // Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.
     $('#header-panel').sticky()
  }

}

import { Component, AfterViewInit } from '@angular/core';

declare var $:any

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // I got a run time error: ERROR ReferenceError: $ is not defined
    $('#header-panel').sticky()
  }

}

import { Component, AfterViewInit } from '@angular/core';

import * as $ from 'jquery' 

interface JQuery{
  sticky(): void
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // Still the .sticky() has an error wrap: 
    // Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.
    $('#header-panel').sticky()
  }

}

import { Component, AfterViewInit } from '@angular/core';

import * as $ from 'jquery'

declare global {
  interface JQuery {
    sticky(): void
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // On run time got this error: 
    // ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).sticky is not a function
    $('#header-panel').sticky()
  }

}

import { Component, AfterViewInit } from '@angular/core';

import * as $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // No matter what still got an
    // ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).sticky is not a function
    (<any> $('#header-panel')).sticky()
    ($('#header-panel') as any).sticky()
  }

}

它真的不起作用，它让我发疯，我应该放弃吗？或者还有什么解决办法？

Answer 1

好吧，由于您已经尝试了 包括依赖项 方法但没有成功，我建议使用如下所示的简单技巧：

[WORKING DEMO] （向下滚动查看粘性行为）

1- 只需在 index.html 文件中包含语义-UI :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.js"></script>
<!--or -->
    <script src="relaive_path_to/semantic.min.js"></script>

2- 只需将 jQuery 包含在 index.html 文件中（与 semantic-ui 相同）：

3- 在 your.component.ts 文件中添加：declare var $: any; 在导入部分旁边，然后在 ngAfterViewInit(){} 中初始化组件），如下所示：

component.ts

import {Component,OnInit} from 'angular2/core';
declare var $: any;
@Component({
    selector: 'my-app',
    templateUrl: 'demo.html',
})
export class AppComponent implements OnInit { 

    ngAfterViewInit(){

          $('.ui.sticky').sticky();
    }
}

Answer 2

从我们在聊天中的讨论中，我意识到你试图让它工作的方式有两个问题 1.Including jquery 和 jquery 类型（不确定为什么这不起作用） 2.The 您在项目中包含语义 ui 文件的方式按照以下步骤使其工作

1.ng new newProjectname
2.npm 安装 jquery
从中下载语义 https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip 并将文件夹解压缩到您的项目中
.给出语义ui和jquery中的引用 angular cli 为

"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "your-ui-folder-path/semantic.min.js" ], "styles": [ "styles.css", "your-ui-folder-path/semantic.min.css" ],
现在可以在项目中使用jquery作为

声明变量 $:any;
并将函数称为

$('id or class').dropdown();//任意函数

希望这个helps.If没用，请参考Saad建议的答案

Answer 3

我遇到了同样的问题。在 GitHub 上有一个关于它的问题，人们建议在 HTML 文件中通过标记脚本只包含 jQuery。这种方法不适合我的情况。我已将 jQuery 包含在我的 app.module.ts 中，并通过 window 对象使其在全球范围内可用。

import * as jQuery from 'jquery';
(<any> window)['jQuery'] = jQuery;

这不是一个很好的处理导入库的方法，但如果语义 ui 以这种方式工作，那就是我们只能做的。

语义 UI jquery 函数在 Angular2 应用程序上不起作用

Semantic UI jquery functions doesn't work on Angular2 application

jquery

semantic-ui

angular