时间戳

首页 > 解决方案 > 语义 ui 侧边栏不工作在角度

angular - 语义 ui 侧边栏不工作在角度

问题描述

我尝试使用 Angular 中的语义 ui 创建一个侧边栏。但它不起作用，当我单击按钮时，我在控制台中收到错误，即在 jquery 中找不到 .sidebar 函数。这是我的组件 html：

<div class="ui sidebar inverted vertical menu">
 <a class="item">
  1
 </a>
 <a class="item">
  2
 </a>
 <a class="item">
  3
 </a>
</div>
<div class="pusher">
 <button class="ui button toggle">toggle</button>
</div>

我的组件 ts 代码是：

import { Component, OnInit } from '@angular/core';
import * as $ from '../../../node_modules/jquery';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.less']
})
export class EditorComponent implements OnInit {

  constructor() { }

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

我在控制台中收到此错误。

ERROR TypeError: _node_modules_jquery__WEBPACK_IMPORTED_MODULE_2__(...).sidebar is not a function
at HTMLButtonElement.<anonymous> (editor.component.ts:17)
at HTMLButtonElement.dispatch (jquery.js:5183)
at HTMLButtonElement.elemData.handle (jquery.js:4991)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)

标签： angularsemantic-ui

解决方案

推荐阅读