动态加载外部 javascript 文件在 angular 6 中不起作用

Question

我正在使用 Angular 6，正在尝试在我的项目中添加 Bootstrap Multiselect。但是我遇到了一些问题 bootstrap-multiselect.js 没有加载到页面中。

所以我想要动态添加这个 bootstrap-multiselect.js 文件，但它没有加载请帮助我解决这个问题

index.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <my-app>loading</my-app>
      <!-- Inclusion of sgwt widgets -->
      <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
   <!-- Multiselect code -->
   <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />
   <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/jquery-2.2.4.min.js"></script>
   <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
   <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
            $('#example-getting-started').multiselect({
              includeSelectAllOption: false,
              enableFiltering: true,
              includeFilterClearBtn: false,
              enableCaseInsensitiveFiltering : true,
            });
        });
   </script>
   <!-- Multiselect code -->
</html>

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() { 
     this.loadScript('http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
   }

   public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

app.component.html

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

还是这样显示：

Please help on this am new in angular 6. This question maybe already asked but that is not solve my issue.

提前致谢。

Answer 1

我已经像您一样从该网站导入了库，但只是更改了 jquery。

  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css"
    type="text/css">
  <link rel="stylesheet"
    href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">


  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script type="text/javascript"
    src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
  <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js">
  </script>

  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css">
  <script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

这里是the stackblitz

在 ngb-modal 中：stackblitz

动态加载外部 javascript 文件在 angular 6 中不起作用

Dynamically load external javascript file not working in angular 6

jquery

angular

bootstrap-4

multi-select

angular-lifecycle-hooks