Question

我刚刚开始Angular2，在创建navbar-component时，我仍然坚持如何使用外部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中加载这些文件。请指导我？

以下是我的一些文件。 -----＆GT;

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>

Answer 1

根据您使用的捆绑包，如果是systemJS，那么您可以参考： https://angular.io/guide/quickstart

或为webpack导入它们： https://angular.io/guide/webpack#entries-and-outputs

Answer 2

您需要在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>

使用外部JS库的Angular 2组件

2 个答案: