Angular2のセマンティックUI - コンポーネント内のサイドバー設定をjQueryから設定する方法は？

Question

私はAngular2アプリケーションを持っており、Semantic UIを使いたいと思っています。

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

それはindex.htmlのheadでのjsファイルをインポートするか、内部の<script>タグに書き込むことによって動作していない。しかし、それ以下のようないくつかのjQueryの構成は、私がロードされたコンポーネントの後に実行する必要がありますコンポーネントテンプレート。それを行うには "typescript"の方法がありますか、またはコンポーネントの内部でjsファイルを使用するにはどうすればよいですか？

Answer 1

私はディレクティブでは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> 

Answer 2

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

Answer 3

最終的にはかなりシンプルですが、この作業を行うには時間がかかります。いくつかの時間を節約したいと思っています。

jQueryコマンドは、JavaScriptで使用するように使用できます（https://semantic-ui.com/modules/sidebar.html#/usageを参照）。しかし、「$」が宣言する必要があり、コマンドは、活字体の機能（「トグル（）」）に配置する必要があります。

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> 

は.angular-cli.jsonのスクリプトセクションにjQueryのを追加することを忘れないでください：私はすでにjQueryの3.2.1に依存セマンティックUI 2.2.12を使用してい

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

。角度バージョンは、node.js 6.11.2で実行される4.4.4です。