Question

我尝试使用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)

语义ui侧边栏在Angular中不起作用

0 个答案: