使用外部JS庫的Angular 2組件
[英]Angular 2 Component using External JS libraries
問題描述
我剛剛開始使用Angular2 ，在創建navbar-component ，我Angular2堅持如何使用外部JS files 。 CSS工作正常，但我無法顯示移動視圖drop-down和toggle-button 。 所以，我猜javascript不起作用。
我正在使用這個庫mdb navbar-materialized-bootsrap 。 我需要使用這三個JS-files 。 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>
2 個解決方案
解決方案1
0 2016-10-26 07:16:53
解決方案2
0 2017-06-13 19:39:09
您需要在index.html中的<app></app>之后導入Js腳本。 代碼將按順序運行。 因此，當加載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>
Angular 2 - 打字稿函數與外部js庫的通信
[英]Angular 2 - communication of typescript functions with external js libraries
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.