使用Angular2的语义UI – 如何在组件中设置jQuery的侧栏设置？

我有一个Angular2应用程序，我想使用Semantic UI 。 但是，有一些jQuery配置如下所示我必须在加载组件后运行：

 $('#app .ui.sidebar') .sidebar({context:$('#app')}) .sidebar('setting', 'transition', 'overlay') 

它无法通过在index.html的head导入js文件或将其写入组件模板内的标记来实现。 是否有“ typescript方式”来做到这一点或如何在组件内使用js文件？

Answer 1

我找到了关于在指令中使用jQuery的链接 ，然后我创建了一个侧边栏指令：

 import {Directive, ElementRef, OnDestroy, OnInit, Input} from '@angular/core'; import {HostListener} from "@angular/core/src/metadata/directives"; declare var $: any @Directive({ selector: '.ui.sidebar' }) export class SidebarDirective implements OnInit, OnDestroy { @Input() context: string; constructor(private el: ElementRef) { } public ngOnInit() { $(this.el.nativeElement) .sidebar({context: this.context}) .sidebar('setting', 'transition', 'overlay'); } public ngOnDestroy() { } } 

然后，我在模板中使用它：

Answer 2

我花了相当长的时间来完成这项工作，尽管最终它很简单。 希望能节省你一些时间……

无需创建指令，您可以像使用JavaScript一样使用jQuery命令（在https://semantic-ui.com/modules/sidebar.html#/usage中描述）。 但是，必须声明“$”并且命令必须位于TypeScript函数中（“toggle（）”）：

 import {Component} from '@angular/core'; declare var $: any; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { toggle() { $('.ui.sidebar').sidebar('toggle'); } } 

模板的相应部分可能如下所示：

 
   
Menu
   

不要忘记将jQuery添加到.angular-cli.json的脚本部分：

 "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/semantic-ui-css/semantic.min.js" ], 

我正在使用已经依赖于jQuery 3.2.1的Semantic UI 2.2.12。 Angular版本是在node.js 6.11.2上运行的4.4.4。

Answer 3

 import { Component, OnInit } from '@angular/core'; declare var $:any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'app works!'; ngOnInit(){ $('#app .ui.sidebar') .sidebar({context:$('#app')}) .sidebar('setting', 'transition', 'overlay') ; } }