jquery.ui的函数没有在角度组件的模板中执行

Question

我在angular的资源文件夹中有jquery-ui.js，我需要从我的组件模板中调用.accordion函数来包装带有手风琴功能的<div id="accordion">但我无法获得要执行的脚本。

angular-cli.json：

angular-cli编译错误

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/jquery-ui.css
Module not found: Error: Can't resolve './images/ui-icons_444444_256x240.png' in '/home/rr7/workspace/emtv2/src/assets'
resolve './images/ui-icons_444444_256x240.png' in '/home/rr7/workspace/emtv2/src/assets'
  using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets)
    using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets/images/ui-icons_444444_256x240.png)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.js doesn't exist
      as directory
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png doesn't exist
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.ts]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.js]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/jquery-ui.css 7:25768-25815 7:25892-25939
 @ ./src/assets/jquery-ui.css

a.component.html

...
<div "id"="accordion">
...
</div>
..
<script>
$( "#accordion" ).accordion({
    collapsible: true
  });
</script>

任何帮助？

Answer 1

将其放入组件的ngAfterViewInit方法中。组件模板中的脚本标签已执行

<强> component.ts

declare let $ :any;

ngAfterViewInit()
{
    $( "#accordion" ).accordion({
      collapsible: true
     });
}

注意：如果可以避免，最好不要将jquery用于角项目