使用Angular2的语义UI -如何在组件中从jQuery设置边栏设置？
使用Angular2的语义UI -如何在组件中从jQuery设置边栏设置？
提问于 2017-01-23 20:58:41
我有一个Angular2应用程序，我想使用Semantic UI。然而，有一些类似下面的jQuery配置，我必须在加载组件后运行：
$('#app .ui.sidebar')
.sidebar({context:$('#app')})
.sidebar('setting', 'transition', 'overlay') 通过在index.html的head中导入js文件或将其写入组件模板内的<script>标记中，它不起作用。有没有一种"typescript方式“可以做到这一点，或者我如何在组件中使用js文件？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-24 14:49:50
我找到了关于在指令中使用jQuery的this link，然后我创建了一个侧栏指令：
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() {
}
}然后，我在模板中使用了它：
<div id="app">
<div context="#app" class="ui left vertical menu sidebar"></div>
<div class="pusher"></div>
</div>Stack Overflow用户
发布于 2017-10-02 00:00:53
我花了相当多的时间让它工作，尽管它在最后是相当简单的。希望能帮你节省一些时间。
不需要创建指令，您可以像对JavaScript使用一样使用jQuery命令(在https://semantic-ui.com/modules/sidebar.html#/usage中介绍)。但是，必须声明"$“，并且命令必须位于切换函数中(”TypeScript ()“)：
import {Component} from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
toggle() {
$('.ui.sidebar').sidebar('toggle');
}
}模板的相应部分可能如下所示：
<div class="ui fixed inverted main menu">
<a (click)="toggle()" class="launch icon item">
<i class="content icon"></i>
<p style="padding-left:1em">Menu</p>
</a>
</div>不要忘记将jQuery添加到.Angular-cli.json的脚本部分：
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/semantic-ui-css/semantic.min.js"
],我正在使用语义UI 2.2.12，它已经依赖于jQuery 3.2.1。Angular版本是4.4.4，运行在node.js 6.11.2上。
Stack Overflow用户
发布于 2017-01-23 21:20:09
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') ;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41806998
复制相关文章
相似问题
腾讯云开发者
