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

更新时间：2023-08-22 19:04:10

我已经像你从那个网站一样导入了库，但只改变了 jquery.

 <link rel="样式表";href=https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css"类型=文本/CSS"><link rel="样式表";href=https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css"类型=文本/CSS"><link rel="样式表";href=https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css"类型=文本/CSS"><script src="https://code.jquery.com/jquery-2.2.4.min.js";完整性=sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin=匿名"></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"><link rel="样式表";href=https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"类型=文本/CSS"><script src=https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

这是stackblitz>

在 ngb-modal 中:堆叠闪电战

I am using Angular 6, am trying to add Bootstrap Multiselect in my project. But here am facing some issue bootstrap-multiselect.js not loading in page.

So am tying to add dynamically add this bootstrap-multiselect.js file, but it is not loading please help me on this

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>

Still it is showing like this:

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

Thanks in advance.

I've imported the libraries like you did from that website but only changed 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>

Here's the stackblitz

Inside an ngb-modal: stackblitz

上一篇 : ：它不起作用（html和javascript和iframe）下一篇 : 触发对iframe的点击不起作用

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

相关阅读

推荐文章