如果第三方库在index.html之外，则无法使用
[英]3rd party libraries not working if outside of index.html
问题描述
I downloaded some free html5 templates and will plan to use it on my angular2 program. 
我下载了一些免费的html5模板，并计划在我的angular2程序中使用它。 The problem is when I put the body outside index.html or inside app.component.html, the template doesn't work. 问题是，当我将主体放在index.html或app.component.html内时，模板不起作用。 It displays nothing. 它什么也不显示。 I am sure that I put every src right. 我确定我将每个src都正确设置了。 Take a look. 看一看。
index.html index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Animate.css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="assets/css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="assets/css/flexslider.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Modernizr JS -->
<script src="assets/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- 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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app></my-app>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="assets/js/jquery.flexslider-min.js"></script>
<!-- Main -->
<script src="assets/js/main.js"></script>
</body>
</html>
Some code in app.component.html app.component.html中的一些代码
<div id="fh5co-services" class="fh5co-bg-section">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-credit-card"></i>
</span>
<h3>Credit Card</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-wallet"></i>
</span>
<h3>Save Money</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 text-center">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="icon-paper-plane"></i>
</span>
<h3>Free Delivery</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove</p>
<p><a href="#" class="btn btn-primary btn-outline">Learn More</a></p>
</div>
</div>
</div>
</div>
</div>
Nothing is showing in here. 这里什么都没有显示。 The thing here is when I put everything in index.html, it works perfectly but when I start to get the code from the body tag and put it inside app.component.html, which I'm sure will go to tag, it isn't showing up. 这里的事情是，当我将所有内容都放入index.html时，它可以正常工作，但是当我开始从body标签中获取代码并将其放在app.component.html中时，我确定将其添加到标签中，这不是没有出现。 My selector is correct and I'm sure of it. 我的选择器是正确的，我确定。 Anyone care to explain or give some solutions? 有人愿意解释或提供一些解决方案吗？ That would be so much appreciated. 那将不胜感激。
2 个解决方案
解决方案1
1 已采纳 2016-11-29 10:03:00
Jquery plugins don't work as expected on angular applications. jQuery插件在角度应用程序上无法正常工作。 Instead create a directive and put the code that you would normally have inside the link function of the directive. 而是创建一个指令，然后将通常应具有的代码放入该指令的链接函数中。
There are a couple of points in the documentation that you could take a look at. 您可以查看文档中的几点。 You can find them here: 您可以在这里找到它们：
Ensure that when you are referencing the script in your view, you refer it last - after the angularjs library, controllers, services and filters are referenced. 确保在视图中引用脚本时，在引用angularjs库，控制器，服务和过滤器之后，最后引用该脚本。
Rather than using $(element), you can make use of angular.element(element) when using AngularJS with jQuery 除了将$（element）用作jQuery之外，还可以使用angular.element（element）。
解决方案2
0 2016-11-29 10:01:05
<script> tags are pruned from component templates (there is a pull request that allows them for some meta-data but that's not yet landed) <script>标签是从组件模板中删除的（存在一个拉取请求，允许它们获取一些元数据，但尚未着陆）
CSS files should be added to @Component({ styleUrls: [...]}) and not to <style> tags in the template. CSS文件应添加到@Component({ styleUrls: [...]}) ，而不应添加到模板中的<style>标签。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.