Angular5 jQuery指令-导入期间未定义UI

Question

我正在使用Angular 5，jQuery 3.3.1。

我想使用jQuery ui.dialog函数。我使用SmartAdmin模板，该模板带有包含各种jQuery函数的指令。我使用几个jQuery指令都没有问题。但是，这是我第一次尝试使用ui指令。将ui指令模块（名为JqueryUiModule）导入组件模块时，出现错误Cannot read property 'dialog' of undefined TypeError: Cannot read property 'dialog' of undefined at Object../src/app/shared/ui/jquery-ui/jqui-dialog/jqui-dialog.directive.ts。

我在下面显示了一些指令，但是抱怨是关于ui未定义$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype。

在这一点上，我并不想使用该指令，而只是尝试导入它。

组件模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { jqueryUiRouting } from './jquery-ui.routing';
import { JqueryUiComponent } from "./jquery-ui.component";
import { SmartadminModule } from "../../shared/smartadmin.module";
import { JqueryUiModule } from "../../shared/ui/jquery-ui/jquery-ui.module";

@NgModule({
  imports: [
    CommonModule,
    jqueryUiRouting,
    SmartadminModule,

    JqueryUiModule,
  ],
  declarations: [JqueryUiComponent]
})
export class JqueryUiShowcaseModule { }

JqueryUiModule：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JquiDialogLauncher} from "./jqui-dialog/jqui-dialog-launcher.directive";
import {JquiAccordion} from "./jqui-accordion.directive";
import {JquiMenu} from "./jqui-menu.directive";
import {JquiAutocomplete} from "./jqui-autocomplete.directive";
import {JquiProgressbar} from "./jqui-progressbar.directive";
import {JquiSpinner} from "./jqui-spinner.directive";
import {JquiSlider} from "./jqui-slider.directive";
import {JquiTabs} from "./jqui-tabs.directive";
import {JquiDialog} from "./jqui-dialog/jqui-dialog.directive";

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    JquiDialog,
    JquiDialogLauncher,
    JquiAccordion,
    JquiMenu,
    JquiAutocomplete,
    JquiProgressbar,
    JquiSpinner,
    JquiSlider,
    JquiTabs,
  ],
  exports: [
    JquiDialog,
    JquiDialogLauncher,
    JquiAccordion,
    JquiMenu,
    JquiAutocomplete,
    JquiProgressbar,
    JquiSpinner,
    JquiSlider,
    JquiTabs,
  ]
})
export class JqueryUiModule {
}

JquiDialog-指令出现问题：

import {Directive, ElementRef, OnInit, Input} from '@angular/core';

declare var $: any;


$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title ) {
      title.html(" ");
    } else {
      title.html(this.options.title);
    }
  }
}));

@Directive({
  selector: '[saJquiDialog]'
})
export class JquiDialog implements OnInit {


  @Input() saJquiDialog: any;

  constructor(private el: ElementRef) {
  }


  ngOnInit(){

    $(this.el.nativeElement).dialog(this.saJquiDialog)
  }
}

感谢您的帮助！鲍勃