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

我有一个Angular2应用程序，我想使用

语义UI

。但是，有一些

jQuery

配置需要在加载组件后运行，如下所示：

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

通过在

index.html

的

头中导入js文件或将其写入组件模板内的
标记中，它不起作用。有没有一种“
typescript
方法”可以做到这一点，或者如何在组件内部使用js文件？
我在指令中找到了使用jQuery的方法，然后我创建了一个边栏指令：

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') ;
  }
}

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>

我花了相当长的时间来实现这一点，尽管最终它相当简单。希望能为你节省一些时间

无需创建指令，您可以像使用JavaScript一样使用jQuery命令（如中所述）。但是，必须声明“$”，并且命令必须位于TypeScript函数（“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>

我使用的是语义UI 2.2.12，它已经依赖于jQuery3.2.1。Angular版本是在node.js 6.11.2上运行的4.4.4。
使用webpack或systemjs？我用Angular cli创建了这个项目，直到你问了这个问题，我才问自己这个问题。现在我查看了它，没有找到system.js和webpack.config.js。我得到“
模块构建失败：错误：/home/bunyamin/WebstormProjects/C3DP/src/app/app.component.ts（11,22）：属性‘sidebar’在类型‘ElementFinder’上不存在。”
“你是如何添加jquery的？webpack还是systemjs？我没有使用ng语义，仅使用semantic.css和js文件。您对此感到高兴吗？我也有同样的问题。ng semantic不完整，缺少许多语义组件，因此我尝试使用标准的语义ui css和js
<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>

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