动态加载外部 javascript 文件在 angular 6 中不起作用 [英] Dynamically load external javascript file not working in angular 6
本文介绍了动态加载外部 javascript 文件在 angular 6 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular 6，正在尝试添加
请在 angular 6 中帮助解决这个问题.这个问题可能已经问过了，但这并不能解决我的问题.
提前致谢.
解决方案
我已经像你从那个网站一样导入了库，但只改变了 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>在 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
这篇关于动态加载外部 javascript 文件在 angular 6 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
