打字稿中的语义 UI - jquery

Question

我遇到了问题，因为我安装了语义 ui 并尝试创建侧边栏坚果我收到了这条消息：[ts] 属性 'sidebar' 在类型 [= 上不存在26=]。我用 Angular 5

app.component.ts:

import { Component } from '@angular/core';
import * as $ from 'jquery';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  arr: Array<any> = [1,2,3,4,5,6,7,8];


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

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ShopList</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">

</head>
<body>
  <app-root></app-root>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
</body>
</html>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSemanticModule } from "ng-semantic";
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgSemanticModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

jQuery 有效，但例如侧边栏无效。感谢您的帮助:)

Answer 1

我通常使用以下方法来使用angular的语义。

1.ng new newProjectname
2.npm 安装 jquery
从中下载语义 https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip 并将文件夹解压缩到您的项目中。如果你想要angular的语义ui，请参考他们的网站以获得相同的
.给出语义ui和jquery中的引用 angular cli 为

"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "your-ui-folder-path/semantic.min.js" ], "styles": [ "styles.css", "your-ui-folder-path/semantic.min.css" ],
现在可以在项目中使用jquery作为

声明变量 $:any;
并将函数称为

$('id or class').dropdown();//任意函数

希望这 helps.If 这没用。希望这有帮助

Answer 2

如果您遵循此 link：https://www.npmjs.com/package/@types/semantic-ui 和运行 npm 安装，您的项目应该能够识别语义 ui 函数的类型。例如 .popup() 或 .dropdown()

（我认为这是比声明 var $: any 更好的解决方案）

打字稿中的语义 UI - jquery

Semantic UI - jquery in typescript

jquery

semantic-ui

angular5