Jquery UI 布局在打字稿中不起作用

Question

我在 typescript 中使用 Jquery UI 布局，我安装了 jquery、jquery-ui 和 jquery.ui.layout，这是我的以下代码

app.component.html

<div id="test">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import * as $ from 'jquery';
import 'jquery-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor() {
   // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

    $(document).ready(function () {
      (<any>$('body')).layout({ applyDefaultStyles: true });
    });
  }   
}

但我在浏览器控制台中收到以下错误

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).layout is not a function
    at HTMLDocument.<anonymous> (app.component.ts:20)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

请帮忙整理

提前致谢！

Answer 1

当我添加适当的 jq 时，这段代码就是如下所示的工作文件

import { Component } from '@angular/core';    
import * as a$ from 'jquery';
    declare var $: JQueryStatic;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
      constructor() {
       // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

        $(document).ready(function () {
          (<any>$('body')).layout({ applyDefaultStyles: true });
        });
      }   
    }

Jquery UI 布局在打字稿中不起作用

Jquery UI layout is not working in typescript

jquery

jquery-ui

jquery-ui-layout

typescript