我刚刚启动 Angular2，在创建 navbar-component 时，我陷入了如何使用外部 JS 文件 的困境。 CSS 工作正常，但我无法显示移动 View 的下拉 和切换按钮。所以，我猜 javascript 不起作用。
我正在使用这个库mdb navbar-materialized-bootsrap 。我需要使用这三个 JS 文件。
mdb.min.js
bootsrap.min.js
jquery2.2.3.min.js
现在，我只是使用 script-tag 来加载 index.html 中的这些文件。请指导我？
这是我的一些文件。 ----->
navbar.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector:'navbar',
templateUrl: 'navbar.component.html',
styleUrls: [
'navbar.component.css'
],
})
export class NavbarComponent {
title='Doctor Application';
}
navbar.component.html
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<a class="navbar-brand">{{title}}</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link">Doctors <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cities</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item">Lahore</a>
<a class="dropdown-item">Karachi (Coming Soon)</a>
<a class="dropdown-item">Islamabad (Coming Soon)</a>
</div>
</li>
</ul>
<!--Search form-->
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!--/.Collapse content-->
</div>
index.html
<html>
<head>
<base href="/">
<title>Angular Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- 3. Configure your own JS files -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script src="static/js/mdb.min.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading your application</app>
</body>
</html>
最佳答案
需要导入<app></app>后面的Js脚本在你的index.html中。代码将按顺序运行。因此，当加载 js 标签时，脚本需要 DOM。
例如:
<html>
<head>
<base href="/">
<title>Angular Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading your application</app>
<!-- 3. Configure your own JS files -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script src="static/js/mdb.min.js"></script>
</body>
</html>
关于javascript - 使用外部 JS 库的 Angular 2 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40255323/