Angular2的语义UI - 如何在组件中设置jQuery的侧栏设置？ [英] Semantic UI with Angular2 - How to set Sidebar settings from jQuery in a component?

问题描述

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

I have an Angular2 application and I want to use Semantic UI. However, there are some jQuery configurations like below that I have to run after a component loaded:

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

通过导入抬头 index.html 或在< script> 标签内写组件模板。是否有 typescript 方式这样做或如何在组件内部使用js文件？

It is not working by importing the js file in the head of index.html or writing it in a <script> tag inside of a component template. Is there a "typescript way" to do that or how can I use a js file inside of a component?

推荐答案

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

I found this link about using jQuery in directives, then I created a sidebar directive:

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() {

  }

}

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

Then, I used it in the template:

<div id="app">
    <div context="#app" class="ui left vertical menu sidebar"></div>
    <div class="pusher"></div>
</div>

这篇关于Angular2的语义UI - 如何在组件中设置jQuery的侧栏设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！