javascript - Angular2 的语义 UI - 如何在组件中从 jQuery 设置侧边栏设置？

Question

我有一个 Angular2 应用程序，我想使用 Semantic UI .然而，有一些jQuery像下面这样的配置，我必须在加载组件后运行:

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

在 head 中导入 js 文件不起作用的 index.html或者写在 <script> 中组件模板内的标记。是否有“typescript 方式”来做到这一点，或者我如何在组件内部使用 js 文件？

Answer 1

我找到了 this link关于在指令中使用 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() {

  }

}

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

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