Question

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

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

通过导入head index.html中的js文件或将其写入组件模板内的<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>

Answer 2

我花了相当长的时间来完成这项工作，尽管最后它很简单。希望能为你节省一些时间......

无需创建指令，您可以像使用JavaScript一样使用jQuery命令（在https://semantic-ui.com/modules/sidebar.html#/usage中描述）。但是，必须声明“$”并且命令必须位于TypeScript函数中（“toggle（）”）：

#setup.py:
from distutils.core import setup, Extension
from Cython.Build import cythonize

setup(ext_modules=cythonize(Extension(
            name='struct_import',
            sources = ["struct_import.pyx", "struct.c"]
    )))

模板的相应部分可能如下所示：

//struct.c
#include "struct.h"

struct Combined create(){
  struct Combined res;
  res.needed.a=42;
  res.notneeded.b=21;
  return res;
}

int extract(struct Combined combined){
   return combined.needed.a;
}

不要忘记将jQuery添加到.angular-cli.json的脚本部分：

import {Component} from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  toggle() {
    $('.ui.sidebar').sidebar('toggle');
  }
}

我正在使用已经依赖于jQuery 3.2.1的Semantic UI 2.2.12。 Angular版本是在node.js 6.11.2上运行的4.4.4。

Answer 3

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

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

3 个答案: